如何為一個(gè)div添加多個(gè)背景圖片
如何為一個(gè)div添加多個(gè)背景圖片
大家在制作頁面的時(shí)候，一個(gè)div只能有一個(gè)背景圖片。如果需要多個(gè)，就要新建元素，下面是學(xué)習(xí)啦小編給大家整理的一些有關(guān)為一個(gè)div添加多個(gè)背景圖片的方法，希望對大家有幫助!
為一個(gè)div添加多個(gè)背景圖片的方法
首先，我們新建一個(gè)HML頁面，并準(zhǔn)備好兩張不同的背景圖片。
然后，我們在htl中隨便新建一個(gè)塊級元素，為他設(shè)置寬高，可以寫點(diǎn)文字。瀏覽器中的效果是下圖這樣的。
然后，我們開始為元素添加背景圖片，我是將background-*這個(gè)屬性分開來寫的。分別是background-image,background-position,backgroud-repeat
在CSS3語法里面，除了backgroud-color是唯一一個(gè)不能使用多個(gè)值的background-*元素，所以，我們以上的三個(gè)元素都可以使用多個(gè)值，兩個(gè)值之間以逗號相連。
但是如果一個(gè)屬性的數(shù)量，少于背景層的數(shù)量，那么這個(gè)屬性就會被應(yīng)用到所有的背景層上面，所以我們的backgroud-repeat只用寫一個(gè)。
我們在瀏覽器刷新之前的頁面可以看到最新的效果，兩個(gè)背景圖片都顯示到我們的標(biāo)簽上?；旧鲜窍葘懙膱D片的z-index值高
除了把這些屬性分開寫，我們也可以只寫一個(gè)background。具體寫法如下圖。兩個(gè)背景圖片之間同樣用逗號隔開。
END
看了“如何為一個(gè)div添加多個(gè)背景圖片”的人還看了