CSS遮罩滾動背景不動 在Web設計中，遮罩和滾動背景動畫是非常常見的元素。但是，有時我們需要在頁面中實現一個遮罩背景，讓頁面的其他元素在其上方顯示，同時讓背景圖片滾動但是不動。這似乎是一個困難的任務，但是使用CSS可以輕松地實現它。 首先，我們需要一個帶有背景圖片的元素。我們可以使用下面的代碼將圖片添加到body元素中：

body {
background: url(background.jpg) no-repeat center center fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

在這里，我們將背景圖像設置為不重復，并將其定位到頁面的中心。使用CSS3的background-size屬性可以將圖像縮放到適合屏幕大小。 接下來，我們可以使用偽元素來創建一個半透明遮罩層。可以使用以下代碼添加一個遮罩層到body元素中：

body::before {
content: "";
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
z-index: -1; 
}

在這里，我們使用了::before偽元素創建了一個遮罩層。使用position: fixed屬性將它固定在屏幕上，然后使用top，left，right和bottom屬性將其展開到整個頁面。background屬性設置其顏色為半透明黑色，并使用z-index將其放在頁面的最底層。 最后，我們可以使用以下代碼讓背景圖片滾動但是不動：

body {
background-attachment: fixed;
}

在這里，我們使用CSS的background-attachment屬性設置背景圖像為固定。這將使背景圖像固定在屏幕位置不變，而頁面的其他內容會滾動。 這樣就可以實現一個帶有半透明遮罩層的固定背景圖像，而其他頁面內容可以在其上方滾動。您可以進一步自定義遮罩和背景圖像的樣式來滿足您的需求。