CSS3中的background-attachment屬性控制背景圖像是否跟隨頁面滾動。background-attachment有兩個值:scroll
和fixed
,分別表示背景圖像跟隨頁面滾動或固定不動。
其中fixed
是CSS3新增的屬性,它能夠創建出像背景定位的效果,使得背景圖像不管怎么滾動,都始終固定在視口中的某個位置。這種效果在網頁設計中經常被用來創建一些特殊的視覺效果,比如模擬深度、視差滾動等。
使用background-attachment: fixed;
將背景圖像定位為固定不動。舉個例子,假設我們有一個DIV元素,需要將背景圖像固定在視口的右上角:
div { background-image: url("background.jpg"); background-attachment: fixed; background-position: right top; }
這樣,在滾動頁面時,背景圖像不會跟隨頁面滾動,而是始終保持在視口的右上角,直至整個頁面完全滾出視口。
需要注意的是,使用background-attachment: fixed;
定位的背景圖像,可能會在不同瀏覽器或設備上表現不一致。在某些手機或平板設備上,可能會因為性能問題或瀏覽器對CSS支持不完整,導致背景圖像不能夠正確地被固定在視口位置。
上一篇css2d移位