我正在建立一个网页,我想要使背景图像缩放以适应整个屏幕,保持宽高比并修复(因此如果您向下滚动,则背景图像保持在同一个位置).
我已经在桌面浏览器中使用了CSS,但在iPhone或iPad上无效.在这些设备上,背景太大(它仍然低于折叠),如果您向下滚动足够远,图像将开始重复.任何人都有修复？谢谢！
HTML {
background: url(photos/2452.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
解决方法
我在移动设备上找到了一个很好的解决方案,不需要JavaScript.
body:before {
content: "";
display: block;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: -10;
background: url(photos/2452.jpg) no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
请注意负z指数值为-10. html根元素默认z-index为0.该值必须是最小的z-index作为背景.
