背景
(这个问题之前已经被问过很多次,比如这里、这里和这里。然而,每次似乎都是由不同的原因引起的。我已经查看了大约四个不同的StackOverflow答案线程并尝试了所有方法,但现在似乎没有任何方法有效,所以我认为这是一个新问题。)
无论如何,我有一个带有背景图像的HTML元素,需要使用background-attachment:fixed;
进行固定。
- 所有桌面浏览器 - 可用
- 移动Firefox - 可用
- 默认的Android/Samsung浏览器 - 可用
- 移动Chrome - 不可用
我将问题简化为一个更简单的可复制测试,即一个单独的section
元素,设置为页面高度的200%
,并且背景是全屏和固定的。
代码
html,body {
padding:0;
margin:0;
height:100%;
width:100%;
}
section {
background-position:center center;
background-attachment:fixed;
background-size:cover;
background-image:url(http://www.andymercer.net/wp-content/themes/andymercer/images/background/home.png);
height:200%;
width:100%;
}
<section>Test</section>
JSFiddle用于测试
为了在您的智能手机上进行比代码片段更轻松的测试:http://jsfiddle.net/LerLz1L2/
我尝试过的事情
backface-visibility: hidden;
-webkit-backface-visibility:inherit;
-webkit-transform: translate3d(0,0,0);
- 将元素及其所有父级设置为
position:static