CSS 在背景属性中与图像 url 结合时，线性渐变不适用于 iOS

Question

我正在使用线性渐变和图像 url 的组合作为页面上的背景。这一切在桌面和移动设备上都运行良好（仅 android），但它在 iOS（iPhone 和 iPad，在 iOS 12 上测试）中断并显示只有一种渐变颜色。这是我正在使用的 CSS：

.green-background-image {
    background:-webkit-linear-gradient(to bottom, rgba(0, 139, 243, 0.9),rgba(72, 177, 0, 0.6)), url(background-min.jpg);
    background:linear-gradient(to bottom, rgba(0, 139, 243, 0.9), rgba(72, 177, 0, 0.6)), url(background-min.jpg);
    background-size: cover;
    background-attachment: fixed;
    background-color:#498ca7;
    background-repeat: no-repeat;
    background-position: center center;
}

我已经为 webkit 添加了浏览器前缀，但这没有任何区别。

这是两种情况下的一些屏幕截图（工作和不工作）

Answer 1

原来是 background-attachment 属性的问题。在我为手机屏幕尺寸添加 background-attachment: scroll; 后，问题就解决了。

编辑

我在某处找到的更好的解决方案（抱歉找不到 link）是：

@media only screen and (max-width: 786px){

    .green-background-image {
        background-image: none;
        background-repeat: no-repeat;
        background-attachment: inherit;
        background-position: inherit;
        background-size: inherit;
        background-position-y: auto;
    }

    .green-background-image{
        content:"";
        background-color: RGB(6, 134, 238);
        position:fixed;
        top:0;
        height:100vh;
        left:0;
        right:0;
        z-index:-1;
        background: linear-gradient(180deg,rgb(0, 139, 243),rgba(72,177,0,0.63)),url(background-min.jpg);
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }

}

CSS 在背景属性中与图像 url 结合时，线性渐变不适用于 iOS

CSS linear gradient not working on iOS when combined with image url in background property

css

background

linear-gradients

ios

CSS 在背景 属性 中与图像 url 结合时，线性渐变不适用于 iOS

CSS linear gradient not working on iOS when combined with image url in background property

css

background

linear-gradients

ios

CSS 在背景属性中与图像 url 结合时，线性渐变不适用于 iOS