CSS 背景图像未出现在 Safari 中

Question

我有一个非常简单的任务，将背景图像应用到 DIV。我可以使用除 Safari 之外的所有其他浏览器查看图像。有人可以看一下我的 CSS 和网站并告诉我我做错了什么吗？

CSS：

#intro2services {
    background:linear-gradient(rgba(0,0,0,1),rgba(0,0,0,0)), url(../img/colorpencils.jpg) fixed;
    background-position: 100% 100%;
    background-size: cover;
    background-repeat: no-repeat;
}

地点： www.designbysheldon.com

Answer 1

我在你的网站上玩了几分钟，我建议分解你的背景样式，而不是压缩一些样式，同时让其他样式自己声明。将 CSS 更改为：

#intro2services {
    background-position: 100% 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-image: -moz-linear-gradient(rgba(0,0,0,1),rgba(0,0,0,0)),url('../img/colorpencils.jpg'); /* Firefox-specific background styles */
    background-image: linear-gradient(rgba(0,0,0,1),rgba(0,0,0,0)), url('../img/colorpencils.jpg');
    background-attachment: fixed;
}

删除了重复，应用了渐变，并正确应用了

cover

尺寸。这已经在 Chrome 和 Safari 中测试并运行。仅当添加

-moz

供应商前缀时，Firefox 才能工作。为了安全起见，您可以添加其他供应商前缀，但此时其他主要浏览器中已经实现了渐变。

Answer 2

这是 Safari 的一个已知问题。大多数时候，在您的样式中添加负 z-index 就可以解决问题。

z-index:-1:

Answer 3

显然 Safari（或者至少是它的某些版本）拒绝将 CSS 应用到表单字段，因此如果您有一个像我一样聪明的小搜索框，Safari 将不会呈现应用于它的任何 CSS。我认为这是我对 SVG 的使用所特有的，然后我认为这与短代码有关。我陷入了困境，直到我在 GitHub 上发现了 2011 年 MarcHaunschild 发表的一篇不起眼的帖子，讨论了这种行为。无论如何，如果您尝试设置搜索框等字段的样式，请使用以下修复方法。

将以下内容添加到您的 CSS 中：

input[type="search"] {
  -webkit-appearance: textfield;
}