CSS에서 이미지를 기반으로 div를 배치하는 방법

CSS에서는 background-position 속성을 통해 DIV의 이미지 위치를 제어할 수 있습니다. 구체적인 단계는 다음과 같습니다. 가로 위치 지정: background-position의 첫 번째 값은 이미지의 너비입니다. 수직 위치 지정: background-position의 두 번째 값은 이미지 높이입니다. 동시 위치 지정: background-position은 너비와 높이 값을 동시에 설정합니다.

CSS를 사용하여 이미지 위치와 일치하도록 DIV 위치 지정

CSS에서는 배경 위치 속성을 ​​사용하여 div 요소 내의 이미지 위치를 제어할 수 있습니다. . 이 속성은 두 가지 값을 허용합니다. 첫 번째 값은 이미지의 가로 위치를 제어하고 두 번째 값은 이미지의 세로 위치를 제어합니다. 단위는 픽셀(px), 백분율(%) 또는 키워드(왼쪽, 가운데, 오른쪽)일 수 있습니다. 상단, 하단). background-position 属性来控制图像在 div 元素内的位置。该属性接受两个值：第一个值控制图像的水平位置，第二个值控制其垂直位置。单位可以是像素 (px)、百分比 (%) 或关键字 (left、center、right、top、bottom）。

水平定位

要根据图像水平定位 div，可以将 background-position 的第一个值设置为图像的宽度。例如，如果图像宽度为 200px，则 CSS 代码为：

<code class="css">div {
  width: 200px;
  height: 100px;
  background-image: url("image.jpg");
  background-size: cover;
  background-position: 200px 0;
}</code>

垂直定位

要根据图像垂直定位 div，可以将 background-position

가로 위치 지정

이미지를 기준으로 div를 가로로 배치하려면 배경 위치의 첫 번째 값을 이미지 너비로 설정하세요. 예를 들어 이미지 너비가 200px인 경우 CSS 코드는 다음과 같습니다.

<code class="css">div {
  width: 200px;
  height: 100px;
  background-image: url("image.jpg");
  background-size: cover;
  background-position: 0 100px;
}</code>

🎜Vertical positioning🎜🎜🎜이미지를 기준으로 div를 수직으로 배치하려면 background-position의 두 번째 값을 설정하면 됩니다. code>를 이미지 높이로 변경합니다. 예를 들어, 이미지 높이가 100px인 경우 CSS 코드는 다음과 같습니다. 🎜<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">&lt;code class=&quot;css&quot;&gt;div { width: 200px; height: 100px; background-image: url(&quot;image.jpg&quot;); background-size: cover; background-position: 200px 100px; }&lt;/code&gt;</pre><div class="contentsignin">로그인 후 복사</div></div>🎜🎜Positioningsynchronous🎜🎜🎜이미지의 가로 및 세로 위치를 모두 기준으로 div의 위치를 ​​지정하려면 두 값을 모두 해당 이미지 크기. 예: 🎜rrreee

위 내용은 CSS에서 이미지를 기반으로 div를 배치하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!