CSS만 사용하여 모바일 장치에서 배경 이미지 크기 조정 문제를 해결하는 방법은 무엇입니까?

모바일 기기에서 배경 이미지 크기 조정 문제 수정

질문에 제공된 CSS 스타일을 HTML 요소에 적용하면 원하는 크기 조정 효과를 얻을 수 있습니다. 배경 이미지를 전체 화면에 맞추고 가로세로 비율을 유지하며 데스크톱 브라우저에 고정된 상태로 유지합니다. 그러나 이러한 스타일은 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;
}

이 솔루션은 전체 본문 요소 위에 절대적으로 위치하는 :before 의사 클래스를 사용하여 새 요소를 생성합니다. 배경 이미지는 원하는 배율 및 배치 속성을 사용하여 이 요소에 할당됩니다. 음의 Z-색인 값을 -10으로 설정하면 이 요소가 전체 페이지의 배경이 되어 다른 모든 콘텐츠 뒤에 남게 됩니다.

이 기술은 모바일에서 배경 이미지를 수정하는 간단하고 효과적인 방법을 제공합니다. 원래 CSS 스타일에서 직면한 한계를 해결합니다.

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