css怎么設(shè)置圖片平鋪

這篇文章主要介紹了css怎么設(shè)置圖片平鋪的相關(guān)知識，內(nèi)容詳細(xì)易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇css怎么設(shè)置圖片平鋪文章都會有所收獲，下面我們一起來看看吧。

1. 重復(fù)（repeat）

重復(fù)是CSS中最常用的圖片平鋪方式，當(dāng)設(shè)置背景圖片的大小小于容器大小時，圖片會重復(fù)出現(xiàn)直到填滿容器。重復(fù)的語法如下：

background-repeat: repeat;

使用這種方式非常簡單，只需要在CSS樣式表中的背景屬性后添加repeat即可，如下所示：

background: url(images/bg.jpg) repeat;

這樣背景圖片就會在頁面上重復(fù)出現(xiàn)，直到填滿整個容器。

2. 水平重復(fù)（repeat-x）

水平重復(fù)是指在橫向上重復(fù)出現(xiàn)背景圖片，并且垂直方向不重復(fù)。當(dāng)容器寬度大于背景圖片時，圖片會橫向平鋪直到填滿整個容器，而垂直方向不會重復(fù)。水平重復(fù)的語法如下：

background-repeat: repeat-x;

與重復(fù)相比，只需要將語法中的repeat替換成repeat-x即可，如下所示：

background: url(images/bg.jpg) repeat-x;

這樣背景圖片就會在頁面上橫向平鋪直到填滿整個容器，而不會在垂直方向上重復(fù)。

3. 豎直重復(fù)（repeat-y）

豎直重復(fù)是指在縱向上重復(fù)出現(xiàn)背景圖片，并且橫向方向不重復(fù)。當(dāng)容器高度大于背景圖片時，圖片會縱向平鋪直到填滿整個容器，而橫向方向不會重復(fù)。豎直重復(fù)的語法如下：

background-repeat: repeat-y;

與重復(fù)相比，只需要將語法中的repeat替換成repeat-y即可，如下所示：

background: url(images/bg.jpg) repeat-y;

這樣背景圖片就會在頁面上縱向平鋪直到填滿整個容器，而不會在橫向方向上重復(fù)。

關(guān)于“css怎么設(shè)置圖片平鋪”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對“css怎么設(shè)置圖片平鋪”知識都有一定的了解，大家如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道。