CSS背景附件固定裁剪圖像

Question

圖像是328x328像素https://i.stack.imgur.com/fpKuw.jpg?s=328&g=1

我的div的寬度是984px（328x3）。

出於某種原因，當我用fixed的背景附件它剪輯的圖像，但是當默認值scroll使用影像是完美的。爲什麼是這樣？

不僅它被剪切，而且當我調整窗口大小以顯示圖像消失時！

.test { 
 
\t background-color: cyan; 
 
\t height: 1720px; 
 
\t width: 984px; 
 
\t background-image: url(https://i.stack.imgur.com/fpKuw.jpg?s=328&g=1); 
 
\t background-repeat: no-repeat; 
 
    background-position: right top; 
 
    background-attachment: fixed; 
 
}

<div class='test'></div>

Answer 1

由於fixed固定相對於視口。當元素處於視圖中時，background-position: right top; background-attachment: fixed;會將圖像置於視口的頂部/右側。由於背景所應用的元素不像視口寬（取決於您的屏幕大小），所以背景圖像會被剪裁。從元素中移除width，以便它可以位於視口的頂部/右側角落，並且只要元素還位於頂部/右側角落中，背景則固定在頂部/右側角落中。

.test { 
 
    background-color: cyan; 
 
    height: 1720px; 
 
    /*width: 984px;*/ 
 
    background-image: url(https://i.stack.imgur.com/fpKuw.jpg?s=328&g=1); 
 
    background-repeat: no-repeat; 
 
    background-position: right top; 
 
    background-attachment: fixed; 
 
}

<div class='test'></div>