背景图片在iOS Chrome中不显示

Question

我遇到了一个奇怪的问题：页面上的div的背景图片在计算机的网络浏览器上运行正常，并且在iOS的Safari上也可以正常运行，但是iOS的最新版本的Chrome（v46）无法显示图片：

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

进一步的观察：

• 在Chrome iOS上等待的时间没有帮助-它永远不会加载
• 如果我返回主屏幕，然后再次返回Chrome浏览器，则该图像仍然不显示
• 如果我返回主屏幕，请打开另一个应用程序（LinkedIn，Safari等），然后返回主屏幕，然后再返回Chrome浏览器...图像经常显示！ 但是，这很挑剔-如果我将手机转到横向模式，图像将再次消失。 当我回到肖像时，它仍然消失了。

 @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浏览器在缩放大图像方面存在问题。 您在Chrome中编写CSS的方式导致尝试以原始尺寸4097x2356px （而不是移动版本）显示图像 。

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

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

更新的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，您的回答使我走上了正确的道路。 经过更多的实验，我意识到这里有一些关键的部分：

我以前最重要的事情是脑海中的以下meta标签：

没有这个，移动媒体标签就不会起作用。

其次，为了解决主要问题-该图像未在我的iPhone 6上显示-它有助于使用最大设备宽度而不是您建议的最大宽度 。

以下是其他可能有所帮助的内容：

1）将媒体查询放在基本样式之后。

2）在媒体查询中使用（-webkit-min-device-pixel-ratio：2）。