您好,登錄后才能下訂單哦!
這篇文章給大家分享的是有關(guān)css如何同時(shí)插兩張背景圖片的內(nèi)容。小編覺得挺實(shí)用的,因此分享給大家做個(gè)參考,一起跟隨小編過來看看吧。
在使用多個(gè)背景圖時(shí),首先把background-image屬性的值用逗號隔開,列出需要用的圖像;然后用background-repeat定義重復(fù)屬性;最后用background-position定義每張小圖的位置即可。
本教程操作環(huán)境:windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。
在使用多個(gè)背景圖時(shí),只需把 background-image 屬性的值用逗號隔開,列出想用的圖像,然后用 background-repeat 定義重復(fù)屬性,最后用 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
scroll_middle.jpg
scroll_bottom.jpg
用 background-repeat 和 background-position 定義多個(gè)值時(shí),定義的順序分別對應(yīng) background-image 的順序。
簡寫:
像上面定義的方式會比較讓人困惑,尤其是后期需要重新排版或維護(hù)的時(shí)候就更煩了。所以很多Web設(shè)計(jì)師喜歡使用簡寫形式指定多個(gè)背景圖。
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;
每用一個(gè) url 定義一張圖片的時(shí)候,就把這個(gè)圖片的 位置 和 重復(fù)方式 都定義好了。
重點(diǎn):
多個(gè)背景圖會一層一層疊在一起,像是 Photoshop 里的圖層。羅列背景圖的順序決定著哪個(gè)圖像在上層。列出的第一個(gè)圖像在最頂層,第二個(gè)圖像在第二層,最后一個(gè)圖像在最底層。以前面的代碼為例,卷軸的上部(scrollTop.jpg)在卷軸的底部(scrollBottom.jpg)之上,而底部又在卷軸中部(scrollMiddle.jpg)之上。
感謝各位的閱讀!關(guān)于“css如何同時(shí)插兩張背景圖片”這篇文章就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,讓大家可以學(xué)到更多知識,如果覺得文章不錯(cuò),可以把它分享出去讓更多的人看到吧!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。