Safari中未显示背景图片

Question

我正在制作一个响应式设计，类名为“bgMainpage”的元素具有背景图片，在所有设备上的Safari浏览器中未显示该图片。我已经应用了背景大小为覆盖整个元素的CSS样式，因为这是客户想要的。我还添加了特定于浏览器的CSS样式，但我不确定还需要做什么才能在Safari中显示出该图片。Chrome、Firefox和IE都可以正常显示该图片。您有什么建议吗？

项目链接

CSS：

.bgMainpage{
    background:url("../images/bg.jpg") no-repeat scroll right top #000000;
    -o-background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size:cover;
    background-size: cover;
}

- AspiringCanadian

Answer 1

Safari存在一个明显的bug，如果满足某些条件，它将不会在背景中显示某些类型的jpg / JPEG图像。对于在线使用，有一种称为渐进式JPEG的jpg图像类型。普通的jpg图像从上到下编码图像数据，因此您可以在线观看它们加载方式。另一方面，渐进式JPEG逐渐以更高的细节编码图像。这意味着它开始模糊，然后变得更清晰。一些人认为这在网上看起来更好，这就是为什么它被使用的原因。一些图像优化器将自动使jpg成为在线使用的渐进式。

根据我的经验，当满足以下某些条件时，Safari不会显示jpg：

• 使用渐进式编码
• 图像是背景（元素或整个页面）
• 图像很大（我不知道有多大，但我遇到了数千像素宽的图像问题）
• 可能还有其他问题，我尚未完全探索此错误

除了Safari之外，我无法在任何浏览器中重现此问题。

要解决此问题，您可以重新保存图像，并确保它不是渐进式格式（Photoshop等都有一个选择器），或者使用另一种格式（GIF，PNG等）。

- JC Hulce

---

+1 哇，这似乎是一个相当难以捉摸的 bug。如果有一种方法可以查看苹果（或者 WebKit？）是否识别它，那就太好了。 - Whymarrh

要检查您的图像是否是渐进式，请访问：http://techslides.com/demos/progressive-test.html。要修复它，只需在Photoshop中打开，并转到菜单文件->保存为Web。 - Zeev G

这应该是正确的答案。似乎下面大部分其他答案只是语法问题，没有直接回答原始问题。 - Hunter Nelson

Answer 2

我有相同的问题，通过更改以下内容已经解决：

background: url("images/backgroundimage.jpg") no-repeat fixed 0 0 / cover rgba(0, 0, 0, 0);

至：

    background: url("images/backgroundimage.jpg");
    background-repeat: no-repeat;
    background-attachment: fixed;
    -o-background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size: cover;

现在在Safari中运行良好 :)

- Mehar

---

这个CSS的问题在于给background属性赋值的顺序。no-repeat必须放在最后。请参考MDN。 - mikabytes

在我的情况下，no-repeat 已经是最后一个了。但是当给定一个 CSS 颜色变量作为第一个值时，它会失败。必须将 background-color 值移动为单独的属性。 - RZKY

Answer 3

我从谷歌搜索页面跳转到这里，如果其他人遇到类似问题，请确保仔细检查你的代码。Safari 对于正确的代码要求非常严格，即使在问题描述中它已经被正确地输入了，也要进行二次检查。如果你忘记了结束括号，这在其他浏览器（如 Chrome）会默认为你是想要把它放在那里并正确地呈现页面，但 Safari 则不会显示。请务必确保所有的代码都正确地打开/关闭：

<div style="background-image:url('../images/bg.jpg');">嗨</div>

- PBwebD

Answer 4

我在使用Safari时遇到了同样的问题。尝试了其他解决方案，唯一有效的方法就是移除一个负的z-index值。

- Jonathan

Answer 5

遇到这个问题并发现了这篇文章，但是尝试后仍然没有解决。最终发现URL()缺少了括号的闭合。即使在没有闭合括号的情况下，在IE9+、Edge、Chrome和Firefox上都可以正常显示背景图片。只有Safari浏览器未能显示背景图片。

添加了括号之后一切正常运行。

- Bjørn Stenfeldt

Answer 6

尝试更改或删除:::

background-attachment:fixed;

在Safari中对我有效...

- Balvant Ahir

Answer 7

我将图像格式从jpeg转换为gif，这样它就可以工作了。因此最终的CSS是：

.bgMainpage{
    background:url("../images/bg.gif") no-repeat scroll right top #000000;
    -o-background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size:cover;
    background-size: cover;
}

- AspiringCanadian

---

不错，Harmeet。也许你可以看一下这个链接并将它改成 .png 格式：http://www.w3.org/QA/Tips/png-gif。祝编码愉快！ - caramba

它已经是一个png格式了！然后我将其转换为jpg格式，但仍然无法正常工作，所以我将其转换为老式的gif格式，这样就可以了。不过还是谢谢你。;) - AspiringCanadian

Answer 8

看起来 Safari 不喜欢：

background-attachment: fixed;

但我仍希望在桌面上有一些视差效果，因此我的解决方案是将上述内容从普通的.header类中移除，并将其放置在以下位置：

@media(min-width: 1334px)

这张图片在大多数iPhone和iPad上都可以显示，只是不能覆盖iPhone 6 Plus。因为这款手机的分辨率已经接近桌面级别。

- theniceninja

Answer 9

请尝试以下代码，您可能需要更改宽度、高度和 URL。

.gallery {
   height: 190px;
   width: 940px;
   margin-bottom: 13px;
   background-color: transparent;
   background-image: url("/img/user/admin/photo.jpg");
   background-repeat:no-repeat;
   background-position: center bottom;
   background-attachment: scroll;
   background-size: cover;
  -ms-background-size: cover;
  -o-background-size: cover;
  -moz-background-size: cover;
  -webkit-background-size: cover;
}

- Vaibhav Sharma

Answer 10

我遇到了同样的问题。我的图片是渐进式的，正如JC Hulce所回答的那样，Safari对此存在一个错误。
要检查您的图像是否是渐进式，请转到：techslides.com/demos/progressive-test.html。
要修复它，只需在Photoshop中打开并转到菜单文件->另存为Web

- Zeev G