Safari中未显示背景图片

我正在开发响应式设计，而“bgMainpage”类具有背景图片，但它并未在所有设备的Safari上显示。我已经应用了背景大小的封面，因为它是客户想要的。我也添加了浏览器特定的CSS，我不知道还有什么其他的做法，以便它在Safari中显示。 Chrome，FF，IE显示图像就好了。有任何想法吗？Safari中未显示背景图片

Project Link

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; 
}

来源

2013-06-27 AnAspiringCanadian

我转换图像格式从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; 
}

来源

2013-06-27 11:48:45 AnAspiringCanadian

不错的一个harmeet，也许你看看这个，并将其改为.png http://www.w3.org/QA/Tips/png-gif-快乐编码 – caramba

这已经是一个png！然后我把它转换成JPG，但它仍然不起作用，所以然后我转换成了好的老GIF并且做到了。不过谢谢。 ;） – AnAspiringCanadian

也许是因为图片被错误保存。我有这个问题一次，不得不改变以下内容：

在photoshop中打开你的照片，并保存它“cmyk”这个选项应该是可以改变的视图，配置证明，cmyk颜色（对不起，我的photoshop是所有在德国）

希望这有助于

来源

2013-06-27 11:24:44 caramba

没有工作。：/ – AnAspiringCanadian

可以给我这个图片的直接链接吗？../ images/bg.jpg – caramba

找到了解决办法。我将单独发布解决方案，感谢您查看它，但请欣赏它。 – AnAspiringCanadian

试试看看这个代码。

.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;

来源

2013-06-27 13:34:32 sarfaraj

Safari有一个明显的错误，它将不会显示某些类型的jpg/JPEG图像在背景中，如果满足一些条件。对于在线使用，有一种叫做Progressive JPEG的jpg图像。普通的jpg图像从上到下对图像数据进行编码，您可以在线查看它们的加载方式。另一方面，渐进式JPEG则以更高的细节对图像进行编码。这意味着它首先加载模糊，然后变得更清晰。有人认为这看起来更好在线，这就是它被使用的原因。某些图像优化程序会自动使jpg逐步在线使用。

在我的经验，当下面的一些条件满足的Safari将不显示JPG文件：

逐行编码用于
的图像是背景（一个元素或整页）
图像很大（我不知道有多大究竟，但我遇到了问题，这是广泛的数千个像素图像）
可能还有其他的事情，我还没有充分挖掘这个bug

我一直无法在除Safari之外的任何浏览器中重新创建此项。

要解决这个问题，您可以重新保存图像，确保它不是渐进格式（photoshop等有这样的选择器），或使用其他格式（gif，png等）

来源

2013-07-16 04:19:14

+1哇，这似乎是一个很不明显的错误。如果能够通过某种方式查看Apple（可能是WebKit？）是否可以识别它，那将会很不错。 – Whymarrh

检查您的图片是否为渐进式：http：//techslides.com/demos/progressive-test.html。修复只是在Photoshop中打开并进入菜单文件 - >保存为网络 –

我有同样的问题，我已经改变解决了这个问题：

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;

和目前在野生动物园的工作不错:)

来源

2014-05-24 06:12:36 Mehar

不适合我.... –

这个CSS的问题是给'背景'属性的顺序。 '不重复'必须走到最后。见[MDN]（https://developer.mozilla.org/en-US/docs/Web/CSS/background#Syntax） – Mika

我有同样的问题。我的形象是进步的，像JC Hulce回答，Safari浏览器有一个错误。
要检查您的图像是否是渐进的，请转至：techslides.com/demos/progressive-test.html。
要修复只需在Photoshop中打开并转到菜单文件 - >保存为网络

来源

2014-11-04 10:37:42

我与Safari有同样的问题。我尝试了其他解决方案，唯一对我有效的方法是删除负面的Z指数。

来源

2014-11-17 15:48:57 Jonathan

谢谢，这解决了我的问题！ –

是的，也解决了我的！ –

我有同样的问题，并没有其他解决方案在这里解决了这个问题。对我而言，我在一个用div封装的锚点上有一个背景图像。所有的浏览器都处理了除Safari 6以外的背景图像。对于我来说，修复方法是设置位置：相对于div和position：绝对位置。

来源

2014-12-23 00:36:43 dubious

我来自谷歌搜索页面，所以万一这个问题出现了别人，只要确保你仔细检查你的代码。对于正确的代码，Safari可能会非常挑剔，所以即使在问题中它的输入正确，只需重新检查一下即可。如果您忘记了结束括号，则不会显示Chrome浏览器等其他浏览器会假设您打算放置并正确呈现网页。确保所有的代码是否正确打开/关闭：

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

来源

2015-12-19 03:41:14 testing123

出现了问题，发现这一点，但没有奏效。最终发现URL（）缺少其右括号。即使没有它，背景图片也适用于IE 9+，Edge，Chrome和Firefox。经过测试的浏览器中只有Safari没有显示背景图像。

增加了）和一切工作。

来源

2016-04-15 09:52:05

尝试更改或删除:::

background-attachment:fixed;

其作品对我来说在Safari .....

来源

2016-06-17 06:21:51

看来Safari不喜欢：

background-attachment: fixed;

但我仍然想要一些视差，特别是在台式机上。所以，我的解决办法是从平原.header类中删除以上，并把它下：

@media(min-width: 1334px)

这已经通过iPad上的iPhone大部分显示我的形象了。它只是不包括iPhone 6 Plus。这款手机的解决方案正在进入桌面领域。

来源

2016-10-07 15:23:05 theniceninja

我有一个类似的问题，但我没有控制图像，因为它是由tumblr产生，所以渐进的建议没有奏效。我仔细检查了我的代码，还有其他建议，最后我尝试用背景图像设置MIN-HEIGHT到div，并且Safari像其他浏览器一样最终显示它。希望有助于摆脱一些头痛。

来源

2016-12-14 17:31:41 JMACTHEFATCAT

请使用以下代码尝试，您可能需要更改宽度和高度以及网址。

.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; 
 
}

来源

2017-07-14 13:48:52

我只是碰到了这个问题，并没有提出的解决方案解决了这个问题。我确实解决了这个问题，这是由于混合协议：网站是https，而bg图像是http。这会导致图像加载失败，并且不会仅在Safari上，MacOS上显示，并且仅对某些用户显示。

来源

2018-01-08 15:21:25 Sandro

Safari中未显示背景图片

回答

相关问题