后台附件:修复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浏览器上运行得很好，但在android/ios(智能设备)上却无法与应用程序chrome或任何网络浏览器兼容。问题是我确实在w3c练习模式上尝试了这个代码，它确实在我的手机上工作，所以我的代码没有错，我的手机没有错，那么这里有什么问题呢？我该如何解决这个问题呢？我是新手，所以这可能是一个新手问题，但这个错误真的让我很生气……

Answer 1

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

如果你在这里查看：http://caniuse.com/#feat=background-attachment，你会看到为什么在你的笔记本电脑上得到的结果与在手机上得到的结果不同。

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

希望能有所帮助

Answer 2

分区封面(版本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;
}

或者：

分区封面(版本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或background-attachment的Parallaxing :已修复；在手机上不能正常工作。

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