CSS背景圖片完全平鋪是網頁美化中非常重要的一項技術。當網頁中使用背景圖片時,要想讓圖片完全覆蓋整個區域就需要使用平鋪技術。下面介紹幾種常用的CSS平鋪方式。
body { background-image: url(bg.jpg); background-repeat: repeat; }
上面的代碼中,background-image
屬性指定了使用的圖片鏈接地址,而background-repeat
屬性則控制了圖片的平鋪方式。其中,repeat
表示把圖片橫向和縱向都平鋪。
body { background-image: url(bg.jpg); background-repeat: repeat-x; }
這個屬性與上一個不同的是,repeat-x
只會把圖片橫向平鋪,而不會縱向平鋪。實現橫向平鋪有時比整張圖片重復平鋪效果更好。
body { background-image: url(bg.jpg); background-repeat: no-repeat; background-size: cover; }
這個屬性則是不平鋪,而是使用cover
屬性把圖片放大完全覆蓋目標區域。雖然圖片放大會失真,但是對于要求高清效果的網站來說非常好用。
總而言之,通過這幾種CSS平鋪方式,我們可以靈活運用把圖片完美覆蓋目標區域,進而提升網頁美觀度。
上一篇css背景圖片怎樣適配
下一篇css背景圖片的引入