CSS中兩個背景圖指的是在一個元素上設置兩個背景圖片。實現方法如下:
background-image: url('first-background-image.jpg'), url('second-background-image.jpg'); background-position: center center, top left; background-repeat: no-repeat, repeat-x;
第一個背景圖的位置為元素的中心,不重復;第二個背景圖的位置為頂部左側,水平方向重復。需要注意的是,第一個背景圖聲明必須放在第二個背景圖的前面。
此外,也可以通過background-size屬性控制兩個背景圖片的尺寸,如:
background-size: cover, 100% auto;
其中,第一個背景圖的尺寸為“覆蓋整個元素”,第二個背景圖的尺寸為“水平方向鋪滿,垂直方向自適應”。
實際應用中,使用兩個背景圖可以實現一些比較酷炫的效果,如下圖所示:
background-image: url('cloud.png'), url('bg.jpg'); background-position: top center, center center; background-repeat: no-repeat, no-repeat; background-size: auto 150%, cover;
這段代碼實現了在一個藍色背景上,添加一個云朵背景。其中,第一個背景圖的位置為頂部中心,第二個背景圖的位置為中心,均不重復;第一個背景圖的尺寸為自適應寬度,高度為原圖的150%,即放大1.5倍;第二個背景圖的尺寸為覆蓋整個元素。這樣,我們就在原有背景的基礎上,添加了一個動態的云朵效果。