學習啦 > 學習電腦 > 電腦技巧 > 如何為一個div添加多個背景圖片

如何為一個div添加多個背景圖片

時間: 本達868 分享

如何為一個div添加多個背景圖片

  大家在制作頁面的時候,一個div只能有一個背景圖片。如果需要多個,就要新建元素,下面是學習啦小編給大家整理的一些有關為一個div添加多個背景圖片的方法,希望對大家有幫助!

  為一個div添加多個背景圖片的方法

  首先,我們新建一個HML頁面,并準備好兩張不同的背景圖片。

  然后,我們在htl中隨便新建一個塊級元素,為他設置寬高,可以寫點文字。瀏覽器中的效果是下圖這樣的。

  然后,我們開始為元素添加背景圖片,我是將background-*這個屬性分開來寫的。分別是background-image,background-position,backgroud-repeat

  在CSS3語法里面,除了backgroud-color是唯一一個不能使用多個值的background-*元素,所以,我們以上的三個元素都可以使用多個值,兩個值之間以逗號相連。

  但是如果一個屬性的數(shù)量,少于背景層的數(shù)量,那么這個屬性就會被應用到所有的背景層上面,所以我們的backgroud-repeat只用寫一個。

  我們在瀏覽器刷新之前的頁面可以看到最新的效果,兩個背景圖片都顯示到我們的標簽上。基本上是先寫的圖片的z-index值高

  除了把這些屬性分開寫,我們也可以只寫一個background。具體寫法如下圖。兩個背景圖片之間同樣用逗號隔開。

  END

看了“如何為一個div添加多個背景圖片”的人還看了

1.怎么在簡歷中添加背景圖片

2.excel圖表如何添加背景圖片

3.如何在word2013中添加背景圖片

4.怎樣添加ppt背景圖片

2171982