鍍金池/ 問答/Android  HTML/ background-attachment: fixed 對背景圖像有什么影響？

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 表現(xiàn)背景圖片填充整個頁面，在 PC 端調(diào)試模式下的模擬器中也是填充整個頁面。

clipboard.png

問題 1

為什么當(dāng)取消 background-attachment: fixed 的屬性后，背景圖片不再填充整個頁面？
clipboard.png

問題2

如果問題 1 是因為 fixed 類似定位中的脫離文檔流造成的，那第 2 個問題我實在不解了。
那就是為何在 Android Chrome 中，無論設(shè)不設(shè)置 background-fixed 屬性，背景圖片都無法填滿頁面？
在 Android edge 瀏覽器（chrome 內(nèi)核）中表現(xiàn)也如此
圖片描述

問題3

如果說問題 2 是因為移動端和 PC 端的標(biāo)準(zhǔn)不一致造成的，那么接下來這個問題我就更想不明白了。
為什么 Android Firefox 的表現(xiàn)是正常的?。ê?PC 端 chrome 表現(xiàn)一致）
圖片描述

回答
編輯回答
傲嬌范

hsjskskskkskdnbxnndnnx

2017年8月29日 04:04
編輯回答
六扇門

html,body{height:100%}加這個就行了
不過background-attachment在移動端經(jīng)常會產(chǎn)生bug（電腦模擬不出的），建議在body根目錄下放一個div裝背景圖
position：fixed w:100%;h:100%;left:0;top:0;background-size:cover;
這樣處理起來不在body上操作會減少后期問題

2017年1月2日 21:17
編輯回答
初心

取消background-attachment: fixed 會讓background-position: center無法正常工作。
可以給body高度。
你的body沒有設(shè)置高度，所以取消background-attachment: fixed會在最頂部居中。

2018年3月24日 13:48