背景附件：修复无法在 android/ios 上运行

Question

这是我的代码：

<div style="width: 100vw; height: 100vh; background-image: url(img/kid1/1.jpg); background-attachment: fixed; background-size: cover"></div>
<div style="width: 100vw; height: 100vh; background-image: url(img/kid1/2.jpg); background-attachment: fixed; background-size: cover"></div>

它适用于我的笔记本电脑上的 chrome，但不适用于应用程序 chrome 或 android/ios（智能设备）上的任何网络浏览器。问题是我确实在 w3c practice mod 上尝试了这个代码，它确实在我的手机上工作，所以我的代码没有错，我的手机没有错，那么这里有什么问题？我该如何解决这个问题？我是新手，所以这可能是一个菜鸟问题，但这个错误真的让我很生气......

Answer 1

很多手机浏览器不支持background-attachment: fixed。

如果您在此处查看：http://caniuse.com/#feat=background-attachment，您会看到在笔记本电脑上获得与手机上不同结果的原因。

到目前为止，我发现最好的办法是将手机上的图像视为没有视差的图像。

希望对你有帮助

Answer 2

Div 封面（第 1 版）：

HTML5：

<div class="fixed"></div>

CSS3：

.fixed { 
background: url(img/kid1/1.jpg) no-repeat center center fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

或者：

Div 封面（第 2 版）：

HTML5：

<div class="fixed" style="background: url(img/kid1/1.jpg) no-repeat center center fixed;"></div>

CSS3：

.fixed {  
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

或在“html”标签上（全屏封面）：

html { 
background: url(img/kid1/1.jpg) no-repeat center center fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

简单。 :)

Answer 3

在移动使用视角上适当地视差。使用 JS 或背景附件的视差：已修复；在手机上无法正常工作。

https://developers.google.com/web/updates/2016/12/performant-parallaxing

Answer 4

免费附件：固定；

 .fixed { 
    background: url(img/kid1/1.jpg) no-repeat center center;
    background-attachment:fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    }