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

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;

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

解决方案：

将渐变改为（左下...）
图像url必须在渐变

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

Background fixed image issue with linear gradient on safari

html

css

safari