CSS背景復(fù)合屬性可以同時(shí)設(shè)置背景圖片、顏色、大小等多個(gè)屬性。其中,添加圖片可以通過(guò)background-image屬性來(lái)實(shí)現(xiàn)。下面是一個(gè)樣例代碼:
background: url('images/background.jpg') repeat-x #fff;
在上面的代碼中,我們?cè)O(shè)置了背景圖片為images文件夾下的background.jpg文件,并通過(guò)repeat-x來(lái)讓圖片沿水平方向平鋪。同時(shí),我們?cè)O(shè)置了背景顏色為白色。
如果你希望圖片不進(jìn)行平鋪,可以使用no-repeat關(guān)鍵詞。例如:
background: url('images/background.jpg') no-repeat #fff;
另外,還可以通過(guò)位置屬性來(lái)調(diào)整圖片的位置。例如,如果你希望圖片和文本內(nèi)容在頁(yè)面的中間位置,可以使用如下代碼:
background: url('images/background.jpg') no-repeat center center #fff;
其中,center center分別表示圖片在水平和垂直方向上都居中對(duì)齊。
使用CSS背景復(fù)合屬性不僅可以讓網(wǎng)頁(yè)顯示更加美觀、有層次感,同時(shí)也可以加快頁(yè)面加載速度,提高用戶體驗(yàn)。