`배경 크기: 커버`를 사용하지 않고 모바일 사파리에서 배경 이미지를 확장하는 방법은 무엇입니까?

CSS를 사용하지 않고 모바일 Safari에서 배경 이미지 확장 background-size:cover

CSS background-size:cover는 일반적으로 확장에 사용됩니다. 배경 이미지, 특정 시나리오, 특히 iOS 장치의 경우 문제가 발생할 수 있습니다. 이러한 문제 중 하나는 뷰포트 크기 및 콘텐츠 높이에 따라 너비가 달라질 수 있는 div를 덮기 위해 배경 이미지를 확장하는 것과 관련이 있습니다.

이 문제의 주요 원인은 background-size:cover가 아니라 background-attachment:fixed입니다. 이 속성은 배경 이미지가 페이지 콘텐츠와 함께 이동하여 모바일 장치에서 원하지 않는 동작을 생성하는 것을 방지합니다.

이 문제를 해결하려면 미디어 쿼리를 사용하여 iPhone 장치를 구체적으로 대상으로 지정하고 배경 첨부 속성을 스크롤하도록 설정하는 것이 좋습니다. . 이렇게 하면 배경 이미지가 페이지와 함께 스크롤되어 문제를 효과적으로 해결할 수 있습니다.

다음은 iPhone 장치를 대상으로 하는 미디어 쿼리가 포함된 CSS 코드의 예입니다.

.cover {
  background-size: cover;
  background-attachment: fixed;
  background-position: center center;

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

이를 통합하여 미디어 쿼리를 사용하면 배경 이미지가 전체 div를 덮도록 확장될 뿐만 아니라 데스크탑과 모바일 장치 모두에서 다양한 뷰포트 크기에 맞게 적절하게 조정되도록 할 수 있습니다.

위 내용은 `배경 크기: 커버`를 사용하지 않고 모바일 사파리에서 배경 이미지를 확장하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!