背景图片不会在平板电脑和手机上显示 phone

Question

背景图片在 PC 和模拟器（平板电脑和 phone）上完美显示，但在实际 phone/tablet 上无法显示。

代码

div#photo_break {
  @include viewport-unit(height, 28vw);
  background-image: url('<img>');
  background-repeat: no-repeat;
  background-size: 100% auto;
  -webkit-background-size: 100% auto;
  -moz-background-size: 100% auto;
  -o-background-size: 100% auto;
  background-position: center top;
  background-attachment: fixed;
  z-index: 99999;
}

website

正如您在这张图片中看到的那样，在 Chromes simulator 中显示了图片。

图片的尺寸不是很大，是吗？

Answer 1

不错的网站。 :D 让我们尝试解决您的问题。

确保您没有在任何媒体查询中包含 CSS 代码，因为它可能会阻止该内容。

您也可以尝试添加一个新的媒体查询，其 CSS 与移动设备相同，例如 @media (min-width: 481px) { }。

在再次加载网站之前清理您的移动浏览器的缓存。

Answer 2

您的背景图片宽度为 12,000 像素。加载需要很长时间，我建议将parent div的背景设为黑色 header，然后将人物的图像作为背景如果有意义，则在该容器中添加元素。保存您的移动用户数据！

Answer 3

mobile和tablet browsers不支持background-attachment: fixed。

改变这个，解决了问题

背景图片不会在平板电脑和手机上显示 phone

background image won't show on tablet and mobile phone

css

mobile

sass

background-image

tablet