CSS - Safari浏览器中背景图片错误

Question

我有一个按钮，可以在所有浏览器中正常工作，但在Safari中无法正常工作。以下是CSS代码：

div#home-buttons #rv {
    background: url("/Portals/248820/images/layout/home-rv.jpg") no-repeat scroll center top / 165px 115px #273e78;
}

Safari错误控制台显示：“资源被解释为图片，但传输的MIME类型为text/plain。”

你有什么解决方法吗？

谢谢！

- jeffusu

---

也许我有点落伍了，但是我从来没有在图像 URL 中看到过像这样的内容：center top / 165px 115px。它应该是用来做什么的？如果只使用 center top 会发生什么？ - ralph.m

Answer 1

问题在于Safari不理解或不支持简写的background中的background-size。我不知道为什么，但我曾经找到过答案。

所以我会这样来写，这样可以正常工作：

background: #273e78 url("/Portals/248820/images/layout/home-rv.jpg") no-repeat scroll center top;
background-size: 165px 115px

就像我说的一样，我曾经遇到过这个问题并解决了它。希望这对你也有用。

引号不是问题。 W3C说您可以使用简单引号或双引号，具体取决于您。更多关于此的信息，请查看：http://www.w3.org/TR/CSS2/syndata.html#value-def-uri

- pzin

---

这并不一定是一个很好的解决方案。例如，我有一个博客页面，它非常长。该页面使用其他页面没有的特定背景。"background-size:cover" 使得所有浏览器（甚至是 Android）上的背景都固定了，但在 Safari 上不是这样。在 Safari 上，背景与内容固定，并随内容滚动，因此会拉伸到长页面的长度（高度）。 - Ricardo Parker

使用您的提示，我必须编写一些荒谬的东西，比如“height: 5000 px”，否则如果我使用iPad的尺寸，即768像素，那么我得到的大多是一个白色背景，只有在页面中央显示768像素高度的图像。这不是期望的效果。我希望Safari像其他浏览器一样保持背景固定。这样内容就可以自由移动，我可以控制背景而无需使用no-repeat选项。谢谢。 - Ricardo Parker

http://css-tricks.com/forums/topic/full-page-backgrounds-on-ios-background-size-cover/page/ - Ricardo Parker

Answer 2

不需要在图像路径上加双引号。可以采用这种方法：

#home-buttons, #rv {
background: url(/Portals/248820/images/layout/home-rv.jpg) no-repeat scroll center top / 165px 115px #273e78;
}

一些浏览器在路径开头没有斜杠时可能无法获取路径。尝试以../portals/248820/images/layout/home-rv.jpg开头。

祝你好运。

- Omar Abdirahman

---

感谢您的回复。我尝试了您建议的更改，但仍然没有显示出来。 - jeffusu

看起来Safari找不到URL中给出的图像。您是否拥有最新版本的Safari？还请检查一下。 - Omar Abdirahman

https://dev59.com/c3RB5IYBdhLWcg3wUV1d - Omar Abdirahman