CSS中的一個元素可以使用多個背景圖,這個特性可以用于實現(xiàn)許多有用的效果,比如設計出更具層次感的背景。下面是CSS實現(xiàn)一個元素兩個背景圖的代碼:
background: url('first_bg.png') top left no-repeat, url('second_bg.png') bottom right no-repeat;
這里的background
屬性實現(xiàn)了兩個圖像的疊加。第一個背景圖first_bg.png
出現(xiàn)在頁面的左上角,而second_bg.png
則出現(xiàn)在頁面的右下角。這種方式可以讓頁面看起來更加美觀。
兩個背景圖的排列順序也可以調整。如下的代碼就將second_bg.png
放在了第一個位置,first_bg.png
則出現(xiàn)在第二個位置:
background: url('second_bg.png') bottom right no-repeat, url('first_bg.png') top left no-repeat;
同時使用多張背景圖可以為網(wǎng)頁賦予更多的細節(jié),比如添加一個背景圖用于表示頁面的主題或著重部分,另外一個背景圖則用于裝飾或渲染。如下的示例代碼演示了如何通過兩個不同尺寸的背景圖來實現(xiàn)裝飾效果:
background-image: url('main_theme.png'), url('decoration.png'); background-position: center top,center top; background-repeat: no-repeat;
這里的main_theme.png
是較大的主題背景圖,而decoration.png
是較小的裝飾背景圖。我們通過background-position
屬性將二者都放到了頁面的頂部中央,通過background-repeat
屬性將其設置為不重復,最終實現(xiàn)了一個更為鮮明的設計效果。