以下为页面代码:
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width initial-scale=1.0 user-scalable=no">
<title>cover</title>
<style>
*{margin:0; padding:0}
body {
background-image: url("http://www.hozen.site/blog/wp-content/uploads/2017/11/PSX_20171012_12170211.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
}
</style>
</head>
<body>
</body>
在 chrome PC 表现背景图片填充整个页面,在 PC 端调试模式下的模拟器中也是填充整个页面。
问题 1
为什么当取消 background-attachment: fixed 的属性后,背景图片不再填充整个页面?
问题2
如果问题 1 是因为 fixed 类似定位中的脱离文档流造成的,那第 2 个问题我实在不解了。
那就是为何在 Android Chrome 中,无论设不设置 background-fixed 属性,背景图片都无法填满页面?
在 Android edge 浏览器(chrome 内核)中表现也如此
问题3
如果说问题 2 是因为移动端和 PC 端的标准不一致造成的,那么接下来这个问题我就更想不明白了。
为什么 Android Firefox 的表现是正常的!(和 PC 端 chrome 表现一致)
html,body{height:100%}加这个就行了
不过background-attachment在移动端经常会产生bug(电脑模拟不出的),建议在body根目录下放一个div装背景图
position:fixed w:100%;h:100%;left:0;top:0;background-size:cover;
这样处理起来不在body上操作会减少后期问题