CSS에서 요소를 채우기 위해 배경 이미지를 늘리는 방법은 무엇입니까?

CSS에서 배경 이미지 늘이기

배경 이미지가 과 같은 요소의 전체 공간을 차지하기를 원하지만 그럴 수 없는 것 같습니다. 제대로 늘어나나요? 다음은 간단한 CSS 솔루션입니다.

제공된 CSS 스크립트는 다음 속성을 가진 "style1"이라는 클래스를 정의합니다.

.style1 {
  background-image: url('http://localhost/msite/images/12.PNG');
  background-repeat: no-repeat;
  background-position: left center;
}

이렇게 하면 요소에 배경 이미지가 표시되지만 전체 셀을 채우기 위해 늘리지 마십시오. 이를 달성하려면 배경 속성을 수정해야 합니다.

.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;
}

배경 크기: 커버 속성을 사용하면 가로세로 비율을 왜곡하지 않고 전체 요소를 덮을 수 있도록 배경 이미지의 크기가 조정됩니다. 이미지를 제자리에 유지하기 위해 background-position: center center 및 background-attachment:fixed를 사용합니다.

이 솔루션은 Safari, Chrome, IE 9, Opera 10, 및 Firefox 3.6.

Internet Explorer의 경우 대체 솔루션을 사용할 수 있습니다.

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";
zoom: 1;

독점 필터를 사용하여 배경 이미지를 늘이지만 IE에서만 지원됩니다.

출처: Chris Coyier의 기사 "완벽한 전체 페이지 배경 이미지"(http://css-tricks.com/perfect-full-page-Background-image/)

위 내용은 CSS에서 요소를 채우기 위해 배경 이미지를 늘리는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!