CSS3提供了循環平鋪圖片的功能,讓我們可以快速美化網頁背景。下面是演示代碼:
body { background-image: url("images/bg.png"); background-repeat: repeat-x; }
代碼分為兩部分,首先是聲明背景圖片的路徑。接著,使用background-repeat
屬性來設置平鋪模式,repeat-x
表示在水平方向上平鋪。其他的可選值還有repeat-y
、repeat
和no-repeat
。
如果需要在垂直方向上平鋪,則可以使用repeat-y
,如下所示:
body { background-image: url("images/bg.png"); background-repeat: repeat-y; }
另外,如果想要圖片只出現一次,可以使用no-repeat
:
body { background-image: url("images/bg.png"); background-repeat: no-repeat; }
總的來說,CSS3的循環平鋪圖片功能十分簡便實用,能夠幫助我們快速修飾網頁。不過需要注意的是,過度使用背景圖片會導致網頁加載緩慢,影響用戶體驗。因此,應該根據實際需要進行選擇和使用。
上一篇css 固定在頁面底部
下一篇css3徑向漸變兼容