首頁  >  文章  >  web前端  >  css怎麼同時插兩張背景圖片

css怎麼同時插兩張背景圖片

醉折花枝作酒筹
醉折花枝作酒筹原創
2021-07-26 10:50:3513533瀏覽

在使用多個背景圖時,先把background-image屬性的值用逗號隔開,列出需要用的圖像;然後用background-repeat定義重複屬性;最後用background-position定義每張小圖的位置即可。

css怎麼同時插兩張背景圖片

本教學操作環境:windows7系統、CSS3&&HTML5版、Dell G3電腦。

在使用多個背景圖時,只要把background-image 屬性的值用逗號隔開,列出想用的影像,然後用background-repeat 定義重複屬性,最後用background-position 定義每張小圖的位置。

HTML程式碼:

<div></div>

CSS程式碼:

background-image: url(images/scroll_top.jpg),
                  url(images/scroll_bottom.jpg),
                  url(images/scroll_middle.jpg);
 
background-repeat: no-repeat, no-repeat, repeat-y;
 
background-position: center top, center bottom, center top;

scroll_top.jpg

css怎麼同時插兩張背景圖片

##scroll_middle.jpg

css怎麼同時插兩張背景圖片

scroll_bottom.jpg

css怎麼同時插兩張背景圖片

#用background-repeat 和background-position 定義多個值時,定義的順序分別對應background-image 的順序。

簡寫:

像上面定義的方式會比較讓人困惑,尤其是後期需要重新排版或維護的時候就更煩了。所以很多Web設計師喜歡用簡寫形式來指定多個背景圖。

CSS程式碼:

background: url(images/scroll_top.jpg) center top no-repeat,
            url(images/scroll_bottom.jpg) center bottom no-repeat,
            url(images/scroll_middle.jpg) center top repeat-y;

每用一個 url 定義一張圖片的時候,就把這個圖片的 位置 和 重複方式 都定義好了。

重點:

多個背景圖會一層一層疊在一起,像是 Photoshop 裡的圖層。羅列背景圖的順序決定哪個影像在上層。列出的第一個影像在最頂層,第二個影像在第二層,最後一個影像在最底層。以前面的程式碼為例,捲軸的上部(scrollTop.jpg)在捲軸的底部(scrollBottom.jpg)之上,而底部又在捲軸中部(scrollMiddle.jpg)之上。

以上是css怎麼同時插兩張背景圖片的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn