모바일 장치에서 전체 화면 배경 이미지 문제를 해결하는 방법은 무엇입니까?

모바일 기기에서 배경 이미지 문제 해결

배경 이미지가 전체 화면으로 확장되는 웹 페이지를 만들 때 가로 세로 비율을 유지하고, 스크롤하는 동안 고정된 상태로 유지되므로 다음과 같은 CSS 코드는 사용됨:

HTML {
  background: url(photos/2452.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

그러나 이 코드를 iPhone이나 iPad와 같은 모바일 장치에 적용하면 배경 이미지가 너무 크게 스크롤되어 반복될 수 있습니다.

해결책은 다음과 같습니다. 아래와 같이 HTML 본문의 일부로 "이전" 의사 요소를 생성할 때:

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 루트 요소의 기본 z-인덱스가 0이므로 "이전" 의사 요소의 z-인덱스 값은 음수(예: -10)로 설정됩니다. 이 음수 값은 배경을 가장 낮은 레이어로 배치합니다.

위 내용은 모바일 장치에서 전체 화면 배경 이미지 문제를 해결하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!