CSS3引入了一種新的背景樣式,即“兩個背景”,它可以同時設置兩個背景圖像,一個是主背景,另一個是附加的背景。這種樣式可以實現更加豐富多彩的背景效果。
background-image: url(main-bg.png), url(add-bg.png); background-size: cover, contain; background-position: top left, center center; Background-repeat: no-repeat;
上述代碼中,第一行設置了兩個背景圖像,用逗號隔開,第一個是主背景圖像,第二個是附加背景圖像。第二行設置了兩個背景圖像的尺寸,第一個圖像填滿整個背景,第二個圖像保持原有大小。第三行設置了兩個背景圖像的位置,第一個圖像在左上角,第二個圖像在中心位置。第四行則確定了兩個背景圖像是否重復。
通過這種方式,我們可以實現許多有趣的背景效果。例如,我們可以設置一個主背景是紋理或圖片,再添加一個透明或半透明的背景圖像,用于渲染濾鏡或遮罩效果。我們也可以用兩個背景圖像來制作具有立體感或深度感的背景效果。
總之,兩個背景樣式可以讓你的網頁背景變得更加炫酷、豐富。不過,在使用時需要注意圖像顯示順序,以及不同圖像的尺寸、位置等參數設置。
上一篇css3與js完美結合
下一篇css3兩大應用原則