CSS에서 전체 너비 배경 이미지를 얻는 방법은 무엇입니까?

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>

설명:

• background-size: Cover;: 이 속성은 배경이 image가 요소의 전체 너비를 덮습니다.
• background-position: center center;: 배경 이미지를 가로 및 세로 중앙에 배치합니다.
• background-repeat: no-repeat;: 방지 요소 내에서 반복되는 이미지.

브라우저 호환성:

이 솔루션은 다음에서 지원됩니다:

• Safari 3
• Chrome Everything
• IE 9
• Opera 10
• Firefox 3.6(Firefox 4는 비공급업체 접두사 버전 지원)

IE 관련 솔루션:

IE 호환성을 위해 다음 CSS 코드를 사용할 수 있습니다:

<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의 기사(https://css-tricks.com/perfect-full-page-Background-image/)에서 확인하실 수 있습니다.

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