CSS 위치 지정 요소의 배경 이미지를 수정하는 한 가지 트릭-프런트엔드 Q&A-php.cn

CSS 위치 지정 요소의 배경 이미지를 수정하는 한 가지 트릭

醉折花枝作酒筹

풀어 주다： 2021-08-13 11:57:56

원래의

1862명이 탐색했습니다.

이전 기사에서는 background-origin 속성을 사용하여 요소의 배경 이미지를 배치하는 방법을 배웠습니다. "CSS에서 원점을 기준으로 배경 이미지를 배치하는 한 가지 트릭"을 참조하세요. 이번에는 요소의 배경 이미지 위치를 지정하는 방법에 대해 알아보겠습니다. 필요한 경우 참고하시면 됩니다.

이전 글에서 소개할 샤오리지의 속성이 아직도 기억나시는지 모르겠네요. 지난 글에서는 background-origin 속성을 주로 소개했기 때문에 오늘은 background-position 속성에 대해 집중적으로 다루지 않았습니다.

먼저 작은 밤부터 살펴보겠습니다.

<style>
    div{
      background-image: url("images/3.jpg");
      background-repeat:no-repeat;
      background-position:left;
    }
  </style>
</head>
<body><div>
<p>为了显示，表明这个一个p元素</p>
<p>为了显示，表明这个一个p元素</p>
<p>为了显示，表明这个一个p元素</p>
<p>为了显示，表明这个一个p元素</p>
<p>为了显示，表明这个一个p元素</p>
<p>为了显示，表明这个一个p元素</p>
<p>为了显示，表明这个一个p元素</p>
<p>为了显示，表明这个一个p元素</p>
<p>为了显示，表明这个一个p元素</p>
<p>为了显示，表明这个一个p元素</p>
<p>为了显示，表明这个一个p元素</p>
<p>为了显示，表明这个一个p元素</p>
<p>为了显示，表明这个一个p元素</p>
<p>为了显示，表明这个一个p元素</p>
</div>
</body>

로그인 후 복사

이 작은 예의 결과는

CSS 위치 지정 요소의 배경 이미지를 수정하는 한 가지 트릭

" background-position:left;" 효과를 취소하면 원래 아래에 있었음을 알 수 있습니다. 배경이미지가 갑자기 위로 올라갔습니다. "배경 위치:왼쪽;" 효과를 선택하면 배경 이미지가 원래 위치로 돌아갑니다. background-position 속성이 배경 이미지를 이동시키는 핵심인 것 같으니 이 속성을 살펴보도록 하겠습니다. background-position:left;”的效果取消掉的时候，可以发现原来在下方的背景图一下子就跑到顶部了。将“background-position:left;”的效果勾选上的时候，这个背景图又跑回原位置了。看来background-position这个属性才是背景图移动的关键啊，那就看看这个属性吧。

background-position属性设置背景图像的起始位置。这个属性设置背景原图像（由background-image

background-position 속성은 배경 이미지의 시작 위치를 설정합니다. 이 속성은 배경 원본 이미지(Background-image로 정의됨)의 위치를 설정합니다. 배경 이미지가 반복되는 경우 이 지점부터 시작됩니다.

이 속성에는 많은 속성 값이 있습니다. 여러분의 편의를 위해 차트만 게시하겠습니다.

CSS 위치 지정 요소의 배경 이미지를 수정하는 한 가지 트릭