背景图像不会在平板电脑和手机上显示答案

【问题标题】：background image won't show on tablet and mobile phone背景图像不会在平板电脑和手机上显示
【发布时间】：2016-10-09 18:47:14
【问题描述】：

背景图片在 PC 和模拟器（平板电脑和手机）上完美显示，但不会在实际手机/平板电脑上显示。

代码

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中显示了图片。

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

【问题讨论】：

什么样的手机/平板电脑？如果是 iOS，则可能是您的背景图片尺寸有问题。
@Pekka웃 我在 iPad Air 2、iPhone 6s 和三星 S2 上测试过

标签： css mobile sass background-image tablet

【解决方案1】：

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

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

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

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

【讨论】：

【解决方案2】：

您的背景图片为 12,000 像素宽。加载需要很长时间，我建议在标题内将父 div 的背景设置为黑色，然后在有意义的情况下将人的图像作为该容器内元素的背景。保存您的移动用户数据！

【讨论】：

感谢您的建议，但第二张图片是问题所在。在servicespart 之后有一个div#photo_break。标题照片完美运行

【解决方案3】：

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

改变这个，解决了问题

【讨论】：