JavaScript 없이 모바일 장치에서 전체 화면 배경 이미지 반복을 수정하는 방법은 무엇입니까?

문제 해결 배경: 모바일 장치에서 반복되지 않는 문제 수정

문제:

사용자는 전체 기능을 구현하는 데 어려움을 겪습니다. 모바일 장치(iPhone 및 iPad)에서 위치가 고정된 화면 배경 이미지입니다. 배경 스타일 지정에 CSS를 사용함에도 불구하고 이미지가 너무 크게 나타나고 아래로 스크롤할 때 반복되는 경향이 있습니다.

해결책:

이 문제를 해결하기 위해 새로운 솔루션은 다음과 같습니다. JavaScript가 필요하지 않은 등장했습니다. 새로운 CSS 스니펫 소개:

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

설명:

• body:before pseudo-element는 HTML 문서 본문 앞에 추가 요소를 생성합니다. .
• 절대 위치 지정을 통해 요소는 요소를 기준으로 고정된 위치에 유지됩니다.
• 음수 Z-인덱스(-10)를 사용하면 요소가 페이지의 일반 콘텐츠 뒤에 나타날 수 있습니다.
• 배경 이미지, 배치, 크기 조정 및 수정은 다음과 동일합니다. 데스크톱 브라우저에 사용되는 원래 CSS입니다.

이 기술은 공급업체 접두사가 없으며 브라우저 간 호환성이 제거된다는 점에 유의하는 것이 중요합니다. 문제.

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