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>

它适用于我的LAPTOP上的chrome，但不适用于app / chrome或Android / ios上的任何网络浏览器（智能设备）。事情是我在w3c练习mod上尝试了这个代码，它确实在我的手机上工作，所以我的代码没有错，我的手机没错，所以这里的问题是什么？我该如何解决这个问题？我是新手，所以这可能是一个noob问题，但这个错误让我很生气...

Answer 1

许多手机浏览器都不支持

background-attachment: fixed。

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

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

希望有所帮助

Answer 2

Div cover（版本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;
}

OR：

Div 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

bacground附着：固定;

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

后台附件：修复不在android / ios上工作

3 个答案: