CSS 背景圖片固定效果在網頁設計中是一個非常常用的技巧，這種效果可以讓網頁在滾動時背景圖片不跟隨滾動，而是保持固定不動，從而營造出一種獨特的視覺效果。下面我們來學習一下如何使用 CSS 實現背景圖片固定效果。 首先，我們需要在 CSS 中定義背景圖片，并且使用 background-attachment 屬性將其固定，請看以下的代碼：

body {
background-image: url('bg.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}

代碼解釋： 在這個代碼中，我們使用了 body 選擇器將背景圖片應用到了整個網頁中。background-image 屬性用于設置背景圖片的路徑和名稱，background-repeat 屬性用于控制背景圖片是否重復平鋪，這里我們設置為不平鋪 no-repeat。background-attachment 屬性用于設置背景圖片的滾動方式，我們設置為固定 fixed，這樣即使頁面滾動，背景圖片也不會跟著滾動。background-size 屬性用于控制背景圖片的大小，我們設置為 cover，這樣可以讓背景圖片自適應整個頁面。 我們還可以使用 CSS 來控制背景圖片的位置，下面這個示例代碼將背景圖片居中放置：

body {
background-image: url('bg.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-position: center center;
}

代碼解釋： background-position 屬性用于控制背景圖片的位置，這里我們設置為 center center，表示將背景圖片水平和垂直方向都居中放置。 另外，我們還可以設置背景圖片的透明度和顏色，下面這個示例將背景圖片的透明度設置為 70%：

body {
background-image: url('bg.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-position: center center;
background-color: #000;
opacity: 0.7;
}

代碼解釋： 這個代碼中，我們使用了 opacity 屬性來控制背景圖片的透明度，取值范圍為 0 到 1，這里我們設置為 0.7，表示背景圖片的透明度為 70%。background-color 屬性用于設置背景顏色，這里我們設置為黑色。 在實際使用中，我們可以將背景圖片固定效果應用到網頁的某個部分，使得這個部分的視覺效果更加突出。可以說，CSS 背景圖片固定效果是網頁設計中非常實用的一種技巧。