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

이 방법은 의사 요소를 생성합니다. -웹페이지의 다른 모든 요소 뒤에 위치하는 요소로, 모바일 장치에 적절하게 크기가 조정되는 비방해적이고 고정된 배경을 만듭니다. 음수 Z-인덱스 값은 의사 요소가 배경에 남아 있도록 보장합니다.

이 솔루션을 구현하면 개발자는 모바일을 포함한 모든 기기에서 사용자 경험을 향상시키는 고정된 배경 이미지로 시각적으로 매력적인 웹페이지를 효과적으로 만들 수 있습니다. 플랫폼입니다.

위 내용은 JavaScript를 사용하지 않고 모바일 장치에서 고정 배경 이미지를 어떻게 만들 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!