ios - 当与背景属性中的图像 url 结合时，CSS 线性渐变在 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; 后，问题就解决了。

编辑

我在某处找到的更好的解决方案(抱歉找不到链接)是:

@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;
    }

}