전체 HTML 요소를 포함하도록 배경 이미지를 늘리는 방법은 무엇입니까?

전체 HTML 요소를 포함하도록 배경 이미지 향상

이 프로그래밍 쿼리에서 배경 이미지를 전체에 걸쳐 늘리려는 사용자를 만나게 됩니다. 셀. 제공된 HTML 코드는 상위 div 내에서 너비가 설정된 배경 이미지를 사용합니다. 현재 사용되는 CSS는 이미지를 왼쪽 중앙에 정렬합니다.

원하는 효과를 얻으려면 배경 이미지가 상위 요소의 전체 범위를 덮을 수 있도록 하는 특정 CSS 속성을 사용해야 합니다. 다음 코드는 해결책을 제시합니다.

<code class="css">.style1 {
  background: url(images/bg.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}</code>

이 코드는 배경 크기 속성을 통합합니다. 이 속성은 표지 값과 함께 가로 세로 비율을 왜곡하지 않고 배경 이미지가 요소의 크기에 적응할 수 있도록 합니다. . 또한 고정 속성을 사용하면 스크롤하는 동안 이미지가 고정된 상태로 유지됩니다.

이 솔루션은 Safari 3, Chrome, IE 9, Opera 10 및 Firefox 3.6을 포함한 다양한 브라우저와 호환됩니다.

의 경우 background-size 속성을 지원하지 않는 브라우저의 경우 대체 IE 관련 솔루션이 존재합니다.

<code class="css">filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";
zoom: 1;</code>

이 솔루션에 대한 크레딧은 Chris Coyier의 종합 기사(http://css-tricks.com/perfect)에 있습니다. -전체 페이지 배경 이미지/.

위 내용은 전체 HTML 요소를 포함하도록 배경 이미지를 늘리는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!