Question

我的网站上有两张固定图片。没有线性渐变的第一个在safari上工作正常，但是一旦我尝试将线性渐变应用到第二个图像，它就会消失。我把-webkit-前缀但没有成功。我也跟着this link。有人能告诉我是什么导致了这个问题吗？

.intro { 
-webkit-background: url('../images/intro.jpg') no-repeat;
background: url('../images/intro.jpg') no-repeat;
background-attachment: fixed;
background-size: cover;
background-position: center center;
padding-top: 150px;
padding-bottom: 120px;
text-align: center;

}

.second-bg {
    background:  linear-gradient(to bottom, rgba(0, 0, 0, .2) 0%, rgba(0, 0, 0, .8) 59%, rgba(0, 0, 0, 0.65) 100%), url('../images/contact.jpg') no-repeat;
    background:  -webkit-linear-gradient(to bottom, rgba(0, 0, 0, .2) 0%, rgba(0, 0, 0, .8) 59%, rgba(0, 0, 0, 0.65) 100%), url('../images/contact.jpg') no-repeat;
    background-position: center center;
    background-size: cover;
    padding-top: 100px;
    background-attachment: fixed;
}

Answer 1

您是否尝试先将图像放入线性渐变？

background:  url('../images/contact.jpg') no-repeat, linear-gradient(to bottom, rgba(0, 0, 0, .2) 0%, rgba(0, 0, 0, .8) 59%, rgba(0, 0, 0, 0.65) 100%) no-repeat;
background:  url('../images/contact.jpg') no-repeat, -webkit-linear-gradient(to bottom, rgba(0, 0, 0, .2) 0%, rgba(0, 0, 0, .8) 59%, rgba(0, 0, 0, 0.65) 100%) no-repeat;

图像在那里，但它处于线性渐变之下，因此不可见。

Answer 2

问题在于线性渐变（到底部......）我将其改为（左下角......）

    background: -webkit-linear-gradient(left bottom, rgba(0, 0, 0, .5) 29%, rgba(0, 0, 0, 0.65) 100%), url('../images/contact.jpg') no-repeat;

并解决了这个问题。需要指出的另一件事是图像必须在渐变之后才会出现，否则它将无法工作。

解决方案：

将渐变更改为（左下角...）
图片网址必须在渐变之后

背景固定图像问题与线性渐变在safari上

2 个答案: