没有在Safari中显示的背景图像

Question

我正在开发一个响应式设计,"bgMainpage"类有一个背景图像,但它并没有在Safari上显示所有设备.我已经应用了背景大小封面,因为它是客户想要的.我也添加了浏览器特定的CSS,我不知道还有什么可以这样做,它也出现在Safari中.Chrome,FF,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;
}

Answer 1

Safari有一个明显的错误,即如果符合某些条件,它将不会在背景中显示某些类型的jpg/JPEG图像.对于在线使用,有一种称为渐进式JPEG的jpg图像.常规jpg图像从上到下对图像数据进行编码,您可以看到它们在线加载.另一方面,渐进式JPEG以逐渐更高的细节对图像进行编码.这意味着它首先加载模糊然后变得更清晰.有些人认为这在网上看起来更好,这就是它被使用的原因.一些图像优化器会自动使jpgs渐进式在线使用.

根据我的经验,当满足以下某些条件时,Safari将不会显示jpgs:

• 使用渐进编码
• 图像是背景(对于元素或整个页面)
• 图像很大(我不知道究竟有多大,但我遇到了数千像素宽的图像问题)
• 可能还有其他的事情,我还没有完全探究过这个bug

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

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

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中工作得很好:)

Answer 3

我从谷歌搜索页面到这里,所以如果其他人出现此问题,请确保仔细检查您的代码.Safari可能对正确的代码非常挑剔,因此即使在问题中输入正确,也只需对其进行双重检查即可.如果您忘记了最后的括号,它将无法显示,Chrome等其他浏览器会假设您打算放置并正确呈现页面.确保所有代码都正确打开/关闭:

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

Answer 4

我遇到了与Safari相同的问题.我尝试了其他解决方案,唯一对我有用的是删除负z-index.

Answer 5

有问题,发现了这一点,但没有任何效果.最终发现URL()缺少其右括号.即使没有它,背景图像也适用于IE 9 +,Edge,Chrome和Firefox.只有经测试的浏览器的Safari才显示背景图像.

添加了),一切正常.

Answer 6

尝试更改或删除 :::

background-attachment:fixed;

它在 safari 中对我有用.....

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