배경 크기를 수정하는 방법: 모바일 Safari의 표지 문제?

CSS Background-Size: Cover replacement for Mobile Safari

CSS 속성 background-size:cover와 관련된 Mobile Safari의 예상치 못한 동작으로 인해 대체 솔루션이 필요합니다. 이 문제는 이미지가 iOS 기기에서 해당 div를 완전히 덮지 못하는 것으로 나타납니다.

해결책:

이 문제를 해결하려면 기본 배경 첨부를 재정의해야 합니다. : 모바일 장치의 고정 속성입니다. iPhone을 대상으로 하는 미디어 쿼리에서 스크롤하도록 배경 첨부를 설정하면 배경 이미지가 원하는 동작을 다시 얻습니다.

.section {
  background-size: cover;
  background-attachment: scroll; /* Override fixed attachment */
}

@media (max-width: @iphone-screen) {
  .section {
    background-attachment: scroll;
  }
}

참고: @iphone-screen 변수는 사전 정의될 것으로 예상됩니다.

이 솔루션을 구현하면 배경 이미지가 콘텐츠의 너비나 높이에 관계없이 전체 div를 원활하게 덮게 됩니다. 이제 background-size:cover 속성이 의도한 대로 작동하여 Mobile Safari에서 일관되고 시각적으로 매력적인 경험을 제공합니다.

위 내용은 배경 크기를 수정하는 방법: 모바일 Safari의 표지 문제?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!