CSS里的背景固定定位是指,我們在頁面滾動時(shí),背景圖片會保持不變,而不是跟隨滾動。這種效果可以讓我們的網(wǎng)頁看起來更加生動、有趣。
使用背景固定定位的方式非常簡單,只需要在CSS中增加一個background-attachment屬性即可:
body { background-image: url(bg.jpg); background-repeat: no-repeat; background-size: cover; background-attachment: fixed; /* 這一行是重點(diǎn) */ }
這里我們將背景圖片設(shè)置為bg.jpg,并且使用no-repeat屬性讓它不重復(fù)出現(xiàn)。background-size屬性用來控制背景圖片的尺寸,cover表示讓圖片自適應(yīng)大小,填滿整個頁面。最后,我們加上background-attachment: fixed,讓背景圖片與頁面一起固定,不隨滾動而移動。
需要注意的一點(diǎn)是,在使用背景固定定位時(shí),可能會出現(xiàn)一些兼容性問題。特別是在移動端設(shè)備上,有些瀏覽器可能無法正常顯示。因此,我們在使用背景固定定位時(shí),最好還是進(jìn)行一些兼容性測試,確保我們的網(wǎng)頁可以在各種設(shè)備上正常顯示。