모바일 Safari에서 배경 크기: 표지가 작동하지 않는 이유는 무엇입니까?

Mobile Safari에서 배경 이미지 덮기

mobile Safari의 background-size:cover 속성에 대한 고유한 동작은 실망스러울 수 있습니다. 전체 div를 덮는 대신 이미지가 뷰포트 너비의 영향을 받지 않고 중앙에 유지되는 경우가 많습니다. 하지만 이 문제는 몇 가지 수정만으로 쉽게 해결할 수 있습니다.

해결 방법:

Mobile Safari에서도 배경 이미지가 전체 div를 덮도록 하려면 background-attachment 속성:

.section {
  margin: 0 auto;
  position: relative;
  padding: 0 0 320px 0;
  width: 100%;
}

#section1 {
  background: url(...) 50% 0 no-repeat;
  background-size: cover;
  background-attachment: scroll;
}

#section2 {
  background: url(...) 50% 0 no-repeat;
  background-size: cover;
  background-attachment: scroll;
}

#section3 {
  background: url(...) 50% 0 no-repeat;
  background-size: cover;
  background-attachment: scroll;
}

방법 작품:

배경 첨부: 스크롤을 설정하면 이제 페이지 콘텐츠와 함께 이미지가 스크롤될 수 있습니다. 이렇게 하면 기기나 뷰포트 너비에 관계없이 이미지가 항상 div의 전체 너비를 덮을 수 있습니다.

이 솔루션은 Mobile Safari의 background-size:cover 동작을 효과적으로 대체하므로 전체 너비를 쉽게 만들 수 있습니다. -다양한 화면 크기에 반응하는 너비 배경 이미지.

위 내용은 모바일 Safari에서 배경 크기: 표지가 작동하지 않는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!