iOS Chrome 中不显示背景图片

Question

我运行遇到了一个奇怪的问题：我页面上 div 的背景图片在我电脑的网络浏览器上工作正常，在 Safari 上工作正常 iOS，但 iOS 的最新版本 Chrome (v46) 不显示图像：

http://winstoncb.com/wp-content/themes/gridsby/test/test2.html

进一步观察：

在 Chrome iOS 上等待的时间再多也无济于事——它从不加载
如果我return回到主屏幕然后再次进入Chrome，图像仍然不显示
如果我return到主屏幕，打开另一个应用程序（LinkedIn、Safari等）然后return到主屏幕，然后return到Chrome ... 通常图像确实显示！然而，它很挑剔——如果我把我的 phone 调到横向模式，图像又会消失。当我转回纵向时，它仍然消失了。

@media screen and (max-width: 500px) {
  div#hero {
    max-height: 400px;
    background: url('http://winstoncb.com/wp-content/themes/gridsby/images/WCB-rectangle2-low-mobile.jpg') no-repeat;
  }
}

@media screen and (max-width: 400px) {
  div#hero {
    background: url('http://winstoncb.com/wp-content/themes/gridsby/images/WCB-rectangle2-low-mobile.jpg') no-repeat;
    background-position: 37% top;
    max-height: 400px;
  }
}

/* HERO IMAGE */
div#hero {
  display: block;
  width: 100%;
  height: 500px;
  margin-left: auto;
  margin-right: auto;
  max-width: 1500px;
  background: url('http://winstoncb.com/wp-content/themes/gridsby/images/WCB-rectangle2-low.jpg') no-repeat;
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-position: 37% top;
}
}

<div id="hero"></div>

这似乎是很多人都会遇到的问题，但我没有看到太多关于它的帖子。如果您能指出正确的方向，非常感谢。

温斯顿

Answer 1

试试这个

background: transparent url("http:your url/images/page-menu-background.png") no-repeat scroll 0% 0% / cover;

Answer 2

我已经玩了一会儿，iOS 上的 Chrome 似乎在缩放大图像方面有问题。您编写 CSS 的方式导致 Chrome 试图显示 image in original size 4097x2356px, not the mobile version.

当我更新 CSS 以便 Chrome 在 iOS 上加载较小尺寸的图像时，一切正常。

此外，请确保将媒体查询放在基本样式之后。

已更新CSS：

/* HERO IMAGE */
div#hero {
  display: block;
  width: 100%;
  max-width: 1500px;
  height: 500px;

  margin-left: auto;
  margin-right: auto;

  background: url('http://winstoncb.com/wp-content/themes/gridsby/images/WCB-rectangle2-low.jpg') no-repeat;

  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;

  background-position: 37% top;
}

/*
  max-device-width set to 1024px means that it will be used for all iPads and
  iPhones, including iPhone 6s plus
  @see http://stephen.io/mediaqueries/
*/
@media screen and (max-device-width: 1024px) {
  div#hero {
    background-image: url('http://winstoncb.com/wp-content/themes/gridsby/images/WCB-rectangle2-low-mobile.jpg');
  }
}

Answer 3

谢谢@Jan Vlcek，你的回答让我走上了正确的道路。经过更多的实验，我意识到这里有一些关键的部分：

我以前没有的最重要的事情是我脑海中的以下元标记：

没有这个，移动媒体标签就没有效果。

其次，为了解决主要问题——图像没有出现在我的 iPhone6 上——使用 max-device-width 而不是像你建议的那样 max-width。

以下是一些可能有所帮助的其他事情：

1) 在基本样式之后放置媒体查询。

2) 在媒体查询中使用 (-webkit-min-device-pixel-ratio: 2)

iOS Chrome 中不显示背景图片

Background image doesn't show in iOS Chrome

css

background

google-chrome

background-image

ios