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.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此时在其他主要浏览器中。