CSS中可以通過設置background-attachment屬性來控制背景是否隨著頁面滾動而移動。如果值為scroll,則背景將會隨著頁面滾動而移動;如果值為fixed,則背景不會隨著頁面滾動而移動,即固定不動。
body { background-image: url("background-image.jpg"); background-repeat: no-repeat; background-position: center center; background-attachment: fixed; }
上面的代碼中,我們給body標簽設置了一張背景圖片,并通過background-repeat和background-position屬性來控制圖片的重復和位置。最重要的是,我們通過background-attachment屬性將背景設置為fixed,這樣就能達到背景不動的效果了。
需要注意的是,當背景圖像的大小超過容器的大小時,即使設置了fixed,背景圖像依然會隨著頁面滾動而移動。如果想要解決這個問題,可以設置背景圖像的大小,讓其適應容器的大小。
body { background-image: url("background-image.jpg"); background-repeat: no-repeat; background-position: center center; background-size: cover; background-attachment: fixed; }
上面的代碼中,我們通過background-size屬性將背景圖像設置為cover,讓其適應容器的大小。這樣即使背景圖片比容器大,也能達到背景不動的效果。
上一篇css字體帶描邊