CSS中設置背景固定不動通常使用background-attachment屬性,它有以下三個值可選:
background-attachment: scroll; /* 默認值,背景圖跟隨滾動 */ background-attachment: fixed; /* 背景圖固定不動 */ background-attachment: local; /* 背景圖隨元素滾動 */
其中應用最廣泛的是background-attachment: fixed,它可以將背景圖片固定在頁面不動,不隨著滾動條滾動。比如這樣的代碼:
body { background-image: url(bg.jpg); background-repeat: no-repeat; background-size: cover; background-attachment: fixed; }
這段代碼將一張名為bg.jpg的圖片作為背景,不重復,并將圖片等比例縮放鋪滿整個頁面,同時使用fixed固定不動。這在頁面中使用很普遍,特別是在需要展示全背景圖片或者在滾動中保持背景固定的效果時。