CSS 배경 이미지가 모바일로 표시되지 않음

CSS 배경 이미지가 모바일로 표시되지 않음

Wordpress 사이트의 몇 페이지 배너 섹션에 CSS를 사용하여 배경 이미지를 추가했는데, 자동 프리픽서를 사용하여 Chrome/Safari/IE/Firefox 데스크톱에서 정상적으로 작동합니다.모바일 브라우저(iPhone의 Chrome 및 Safari에서 테스트한 적이 있음)에서는 일부 배너 이미지가 올바르게 표시되는 반면 다른 배너 이미지는 올바르게 표시되지 않습니다.

.banner {
position: relative;
overflow: hidden;
background: -webkit-linear-gradient(bottom left, rgba(37, 17, 36, 0.45), rgba(37, 17, 36, 0.45)), url(img/banners/home.jpg);
background: linear-gradient(bottom left, rgba(37,17,36,0.45),rgba(37,17,36,0.45)),url(img/banners/home.jpg);
background-size: cover;
text-align: center;
background-position: center center;
}

왼쪽 이미지는 배경 이미지를 올바르게 표시하는 페이지의 이미지이고 오른쪽 이미지는 그렇지 않은 페이지의 이미지입니다.사용되는 이미지를 제외하고, 양쪽의 css는 완전히 동일합니다.

업데이트: 몇 가지 조언을 듣고 일부 이미지의 크기를 조정하여 모바일에서 Chrome/Safari가 작동하는지 확인했습니다.

보시다시피 크롬과 사파리 둘 다 아이폰에서 작동했습니다.Apple의 IOS 매뉴얼에서는 최대 사이즈는 1024px로 권장하고 있습니다만, 1400px는 정상적으로 동작했습니다(단, 전화기의 Safari 설정에서 쿠키와 데이터를 삭제해야 했습니다).

그러면 이 두 이미지 사이에 다른 점은 무엇일까요?대부분 픽셀 사이즈와 관련되어 있습니다.

Mobile Safari에는 픽셀 임계값이 있습니다.이것은 이미지의 크기(KB)와는 관계가 없고 픽셀의 양과는 관계가 없습니다.표시되지 않는 이미지의 크기는 무엇입니까?그것들은 저것들보다 더 긴가요 아니면 더 큰가요?

다음은 Safari 웹 콘텐츠 가이드 링크입니다.[ Known iOS Resource ](알려진 iOS 자원) 한계까지 스크롤하여 해당 범주에 해당하는지 확인합니다.

이 2014년 질문은 2021년에도 분명히 여전히 관련이 있다.OnePlus 5가 다른 모든 기기에 정상적으로 로드될 때 전체 페이지 배경 이미지가 로드되지 않는 문제가 있었습니다.위 LittlyClever의 코멘트에 따라 이미지 크기를 1400px폭으로 조정하여 모바일 버전에 표시된 변종 이미지를 만들고 정상적으로 로딩합니다.동시에 다운로드가 ~3MB에서 1MB 이하로 줄었기 때문에 그것도 좋습니다.

언급URL : https://stackoverflow.com/questions/23586530/css-background-image-not-displaying-on-mobile