32

我正在研究响应式设计，并且“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;
}
4

18 回答 18

42

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

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

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

除了 Safari，我无法在任何浏览器中重新创建它。

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

于 2013-07-16T04:19:14.070 回答
18

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

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-24T06:12:36.117 回答
13

我是从谷歌搜索页面来到这里的，所以如果其他人遇到这个问题，请确保你仔细检查你的代码。Safari 对正确的代码可能非常挑剔，所以即使在问题中输入正确，也请仔细检查一下。如果您忘记了结尾括号，它将不会显示，其他浏览器（如 Chrome）会假定您打算放置它并正确呈现页面。确保您的所有代码都正确打开/关闭：

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

于 2015-12-19T03:41:14.193 回答
7

我对 Safari 也有同样的问题。我尝试了其他解决方案，唯一对我有用的是删除负 z-index。

于 2014-11-17T15:48:57.927 回答
7

有问题并找到了这个，但没有任何效果。最终发现 URL() 缺少右括号。即使没有它，背景图像也可以在 IE 9+、Edge、Chrome 和 Firefox 上运行。在测试的浏览器中，只有 Safari 没有显示背景图像。

添加了)，一切正常。

于 2016-04-15T09:52:05.207 回答
5

尝试更改或删除 :::

background-attachment:fixed;

它在野生动物园中对我有用.....

于 2016-06-17T06:21:51.060 回答
3

我将图像格式从 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-27T11:48:45.360 回答
2

Safari 似乎不喜欢：

background-attachment: fixed;

但我仍然希望有一些视差，尤其是在台式机上。所以，我的解决方案是从普通的 .header 类中删除上述内容并将其放在：

@media(min-width: 1334px)

这让我的图像通过 iPad 显示在大多数 iPhone 上。它只是不包括 iPhone 6 Plus。这款手机的分辨率正在进入桌面领域。

于 2016-10-07T15:23:05.417 回答
1

可能是因为图片保存错误。我曾经遇到过这个问题，不得不更改以下内容：

在 Photoshop 中打开您的图片并将其保存为“cmyk” 此选项在视图中应该是可更改的、可配置的、cmyk 颜色（对不起，我的 Photoshop 都是德文的）

希望这可以帮助

于 2013-06-27T11:24:44.360 回答
1

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

于 2014-11-04T10:37:42.417 回答
1

请尝试使用以下代码，您可能需要更改宽度和高度以及 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;
}

于 2017-07-14T13:48:52.013 回答
1

我刚刚遇到了这个问题，并且没有一个建议的解决方案解决了这个问题。我确实解决了我的这个实例，这是由于混合协议：站点是 https 而 bg 图像是 http。这导致图像的加载静默失败，并且仅在 Safari、MacOS 和某些用户上不显示。

于 2018-01-08T15:21:25.710 回答
1

我遇到了同样的问题，解决方案很奇怪，但我会在这里发布，以防它对某人有用。

我有这个代码：

footer {
  margin-top: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url("footer.png");
  background-repeat: repeat;
  -o-background-size: cover;
  -moz-background-size: cover;
  -webkit-background-size: cover;
}

并且背景图像没有在 safari 中显示，但是当我删除该display: flex行时，它正确显示，在其他浏览器中没有任何变化。我现在不知道为什么以及如何工作，但也许它会帮助某人。

于 2020-08-25T13:26:23.260 回答
0

试试这个代码。

.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-27T13:34:32.883 回答
0

我遇到了同样的问题，这里的其他解决方案都没有解决这个问题。对我来说，我在一个包裹在 div 中的锚点上有一个背景图像。除 Safari 6 外，所有浏览器都可以很好地处理背景图像。对我来说，解决方法是在 div 上设置 position:relative，在锚链接上设置 position:absolute。

于 2014-12-23T00:36:43.307 回答
0

我遇到了类似的问题，但我无法控制图像，因为它是由 tumblr 生成的，所以渐进式建议不起作用。我仔细检查了我的代码和其他任何建议，最后我尝试使用背景图像为 div 设置 MIN-HEIGHT，Safari 最终像其他所有浏览器一样显示它。希望这有助于摆脱一些头痛。

于 2016-12-14T17:31:41.703 回答
0

改变background财产background-image，每个人都是赢家。

于 2019-07-25T18:21:48.243 回答
0

我的问题是简短的css

background: url('image.png') no-repeat scroll center center #mycolor;

是背景颜色。解决方案就是把它放在一个单独的元素样式中，像这里

background: url('image.png') no-repeat scroll center center;
background-color: #mycolor;
于 2020-02-28T11:29:37.970 回答