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.designedbysheldon.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中使用。 Firefox仅在添加-moz供应商前缀时有效。您可以添加其他供应商前缀以确保安全，但此时在其他主要浏览器中添加gradients are implemented。

Answer 2

这是Safari的一个已知问题。大多数情况下，为您的样式添加负z-index将解决问题。

z-index:-1:

Answer 3

显然，Safari（或至少它的某些版本）拒绝将CSS应用于表单字段，因此，如果您像我一样拥有一个聪明的小搜索框，则Safari不会呈现任何应用于它的CSS。我认为这是我使用SVG所特有的，然后我认为这与短代码有关。直到2011年MarcHaunschild在GitHub上发表了一篇晦涩的文章，讨论这种行为后，我才陷入困境。无论如何，如果您要为搜索框等字段设置样式，这里就是解决方法。

将以下内容添加到CSS：

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

CSS背景图片没有出现在Safari中

3 个答案: