모바일에서 고정된 배경 이미지가 깨지는 이유는 무엇이며, CSS만으로 이를 어떻게 수정할 수 있습니까?

모바일에서 고정된 배경 문제: 크기 조정 및 반복 해결

웹페이지를 개발할 때 모바일에서 고정된 배경 이미지를 적용하는 데 어려움을 겪을 수 있습니다. 장치. background-size:cover 및 background:no-repeat center centerfixed와 같은 CSS 속성을 사용하는 데스크톱 브라우저에서 효과적인 것으로 입증된 솔루션은 iPhone 및 iPad에서 원하는 결과를 생성하지 못합니다.

이 문제를 해결하기 위해 JavaScript가 필요하지 않고 간단한 수정을 제공하는 유용한 솔루션이 등장했습니다.

body:before {
  content: "";
  display: block;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: -10;
  background: url(photos/2452.jpg) no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

이 솔루션은 고정 요소로 작동하는 의사 요소를 생성하여 작동합니다. 배경은 다른 모든 페이지 요소 뒤에 위치합니다. HTML 요소에 사용된 것과 유사한 많은 CSS 속성을 활용하여 동작의 일관성을 보장합니다.

z-index 속성은 음수 값 -10으로 설정되어 있으며 이는 의사-인덱스에 매우 중요합니다. 요소를 배경으로 표시합니다. HTML 루트 요소의 기본 Z-인덱스 값은 0이므로 음수 값을 사용하면 의사 요소가 페이지의 다른 모든 요소 뒤에 배치됩니다.

위 내용은 모바일에서 고정된 배경 이미지가 깨지는 이유는 무엇이며, CSS만으로 이를 어떻게 수정할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!