CSS的平鋪背景可以實(shí)現(xiàn)讓圖片或顏色一直重復(fù)出現(xiàn),填充整個(gè)頁(yè)面。下面我們就來(lái)介紹一下CSS設(shè)置平鋪背景的方法。
第一種方法:使用background-repeat屬性
在CSS中,可以通過(guò)設(shè)置background-repeat屬性來(lái)實(shí)現(xiàn)平鋪背景。background-repeat屬性默認(rèn)值為repeat,即不斷重復(fù)圖片或顏色。當(dāng)然,我們也可以設(shè)置其為no-repeat,使之不重復(fù)。
以下是一個(gè)例子,將圖片平鋪至整個(gè)頁(yè)面:
第二種方法:使用background-size屬性
在CSS3中,還有一種更加靈活的方式來(lái)設(shè)置平鋪背景,即通過(guò)background-size屬性。該屬性可以設(shè)置背景圖片的大小,包括寬度和高度,還可以設(shè)置cover和contain兩個(gè)值,分別表示背景圖片鋪滿(mǎn)或被包含在容器中。
以下是一個(gè)例子,將圖片以cover方式平鋪至整個(gè)頁(yè)面:
總結(jié)
以上就是CSS設(shè)置平鋪背景的兩種方法,可以根據(jù)需求來(lái)選擇實(shí)現(xiàn)方式。如果只是簡(jiǎn)單的平鋪背景,那么使用background-repeat屬性就可以滿(mǎn)足需求。如果需要更加靈活地控制背景圖片的大小,那么可以選擇使用background-size屬性。
第一種方法:使用background-repeat屬性
在CSS中,可以通過(guò)設(shè)置background-repeat屬性來(lái)實(shí)現(xiàn)平鋪背景。background-repeat屬性默認(rèn)值為repeat,即不斷重復(fù)圖片或顏色。當(dāng)然,我們也可以設(shè)置其為no-repeat,使之不重復(fù)。
以下是一個(gè)例子,將圖片平鋪至整個(gè)頁(yè)面:
body { background-image: url(圖片地址); background-repeat: repeat; }
第二種方法:使用background-size屬性
在CSS3中,還有一種更加靈活的方式來(lái)設(shè)置平鋪背景,即通過(guò)background-size屬性。該屬性可以設(shè)置背景圖片的大小,包括寬度和高度,還可以設(shè)置cover和contain兩個(gè)值,分別表示背景圖片鋪滿(mǎn)或被包含在容器中。
以下是一個(gè)例子,將圖片以cover方式平鋪至整個(gè)頁(yè)面:
body { background-image: url(圖片地址); background-size: cover; }
總結(jié)
以上就是CSS設(shè)置平鋪背景的兩種方法,可以根據(jù)需求來(lái)選擇實(shí)現(xiàn)方式。如果只是簡(jiǎn)單的平鋪背景,那么使用background-repeat屬性就可以滿(mǎn)足需求。如果需要更加靈活地控制背景圖片的大小,那么可以選擇使用background-size屬性。