background-attachment: fixed 对背景图像有什么影响?

以下为页面代码:

<!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 端调试模式下的模拟器中也是填充整个页面。

clipboard.png

问题 1

为什么当取消 background-attachment: fixed 的属性后,背景图片不再填充整个页面?
clipboard.png

问题2

如果问题 1 是因为 fixed 类似定位中的脱离文档流造成的,那第 2 个问题我实在不解了。
那就是为何在 Android Chrome 中,无论设不设置 background-fixed 属性,背景图片都无法填满页面?
在 Android edge 浏览器(chrome 内核)中表现也如此
图片描述

问题3

如果说问题 2 是因为移动端和 PC 端的标准不一致造成的,那么接下来这个问题我就更想不明白了。
为什么 Android Firefox 的表现是正常的!(和 PC 端 chrome 表现一致)
图片描述

阅读 7.9k
3 个回答

html,body{height:100%}加这个就行了
不过background-attachment在移动端经常会产生bug(电脑模拟不出的),建议在body根目录下放一个div装背景图
position:fixed w:100%;h:100%;left:0;top:0;background-size:cover;
这样处理起来不在body上操作会减少后期问题

取消background-attachment: fixed 会让background-position: center无法正常工作。
可以给body高度。
你的body没有设置高度,所以取消background-attachment: fixed会在最顶部居中。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题