Safari 背景图像未显示答案

【问题标题】：safari background image not showingSafari 背景图像未显示
【发布时间】：2020-04-13 05:51:05
【问题描述】：

这个网站有一个问题：除了 safari 之外，所有浏览器都可以。如您所见，在 safari 中，法拉利附近有 2 行不同的红色，这是因为 safari 没有读取我用来保持汽车图像相同红色的 1x1px 背景图像（我m 使用图像，因为汽车已包含颜色配置文件，因此颜色代码不同。

http://www.aformulaonehistory.com

有人知道为什么吗？

结构是这样的

<div class="background_color">
    <div id="car_in_background">
    </div>
</div>

使用这样的 CSS：

    .background_color {
        background: url('http://www.mydomain.com/img/image.jpg') repeat;
    }

    #car_in_background {
        background: url('http://www.mydomain.com/img/car.jpg') no-repeat center center;
        background-size:contain;
        height:101%;
        overflow:hidden;
        position:relative;
    }

谢谢！

编辑：我认为 safari 会读取背景图像，但不会读取颜色配置文件。这很奇怪，因为图像包含了 ICC 配置文件（在 ffox 和 chrome 中正确显示）。

【问题讨论】：

标签： css image background safari

【解决方案1】：

嗯...如果我比较不同浏览器中的颜色代码，它们不适合。在 Safari 中加载的图片本身具有完全不同于网站或背景的颜色。

但我想真正的问题是，在我的浏览器版本中根本没有加载 safari 上的背景图像，因此 Safari 使用颜色回退。

如果您在网站上查看非常详细的信息，您会发现，灰色图片也不能 100% 与背景匹配。

你可以试试这个：使用

background: #c54040;
background: url('http://www.aformulaonehistory.com/img/backgr/c54040.jpg') repeat;

而不是

background: #c54040 url('http://www.aformulaonehistory.com/img/backgr/c54040.jpg') repeat;

也许这有帮助；）

【讨论】：

是的，这就是问题所在。不幸的是，该解决方案不起作用。
实际上，使用该代码，我对 firefox 和 chrome 有同样的问题
您是否只是尝试忽略颜色后备，然后会发生什么？
试过了：什么也没发生。所以我认为问题在于 Safari 读取了 1x1 像素的图像，但没有颜色配置文件。但这很奇怪，因为图像包含 ICC 配置文件，并且 Safari 可以正确读取带有汽车的大图像，即颜色配置文件。
您是否尝试使用来通过 css 使用您的图像而不是背景图像？我想这行得通，因为有时 Safari 甚至不会以全分辨率加载背景图像......

【解决方案2】：

我猜是根据http类型的图片。你可以尝试一些https图片进行测试

【讨论】：