我們?cè)谑褂肅SS設(shè)置背景圖片的時(shí)候,有時(shí)候希望這個(gè)背景圖片不要跟隨鼠標(biāo)移動(dòng),而是固定在某個(gè)位置。這種情況下,可以使用CSS中的background-attachment屬性來(lái)實(shí)現(xiàn)。
background-attachment屬性有兩個(gè)值:scroll和fixed。scroll是默認(rèn)的屬性值,背景圖片會(huì)隨著頁(yè)面滾動(dòng)而移動(dòng)。而fixed則是我們需要的屬性值,它能夠使背景圖片固定在頁(yè)面的某個(gè)位置不動(dòng)。
下面是設(shè)置背景圖片不跟隨鼠標(biāo)的具體CSS代碼:
body { background-image: url("background.jpg"); background-repeat: no-repeat; background-size: cover; background-attachment: fixed; }
在這段代碼中,我們?cè)O(shè)置了背景圖片為background.jpg,并且設(shè)置了不重復(fù)顯示(background-repeat: no-repeat),使背景圖片只顯示一次。background-size: cover屬性則使背景圖片能夠完全覆蓋整個(gè)頁(yè)面。最后,我們?cè)O(shè)置了background-attachment: fixed,使背景圖片固定在頁(yè)面不動(dòng)。
下一篇css背景圖模糊化