|
示例代碼：多背景圖片
使用這種技術(shù)我們可以重現(xiàn)類似于Silverback網(wǎng)站中只使用一個(gè)HTML元素的多背景圖片效果。
該元素?fù)碛凶约旱谋尘皥D片和需要填充的空間。將該元素相對(duì)定位后作為其偽元素的絕對(duì)定位參考點(diǎn)。使用正值的z-index將有助于偽元素選擇合適的z-index值（小志注：對(duì)于這句的翻譯思考了很久一直沒能選擇合適的詞來表達(dá)，主要的意思根據(jù)下面的代碼我們可以看到是將偽元素的z-index值設(shè)置比元素自身的小即可，最好是用負(fù)值）。
Copy to clipboard]View Code CSS1
#silverback {
position:relative;
z-index:1;
min-width:200px;
min-height:200px;
padding:120px 200px 50px;
background:#d3ff99 url(vines-back.png) -10% 0 repeat-x;
}
兩個(gè)偽元素將會(huì)通過絕對(duì)定位的方式固定在該元素的兩邊。設(shè)置z-index值為-1將偽元素移到內(nèi)容層的后面。這樣偽元素將會(huì)位于元素的背景和邊框上面，但是該元素的內(nèi)容依然可以選擇。
Copy to clipboard]View Code CSS1
#silverback:before,
#silverback:after {
position:absolute;
z-index:-1;
top:0;
left:0;
right:0;
bottom:0;
padding-top:100px;
}
每個(gè)偽元素都擁有一個(gè)可重復(fù)的背景圖片屬性。這是實(shí)現(xiàn)類型多重背景效果所需要的。
偽元素的content屬性允許添加圖片內(nèi)容。這樣我們就可以添加兩張圖片在一個(gè)偽元素中�？梢酝ㄟ^改變偽元素的其他屬性改變圖片的位置，例如text-align和padding。
Copy to clipboard]View Code CSS1
#silverback:before {
content:url(gorilla-1.png);
padding-left:3%;
text-align:left;
background:transparent url(vines-mid.png) 300% 0 repeat-x;
}
#silverback:after {
content:url(gorilla-2.png);
padding-right:3%;
text-align:right;
background:transparent url(vines-front.png) 70% 0 repeat-x;
}
使用CSS2.1的多重背景圖效果成品。
出處：小志博客
責(zé)任編輯：bluehearts
上一頁(yè) css2.1實(shí)現(xiàn)多重背景和邊框效果 [1] 下一頁(yè) css2.1實(shí)現(xiàn)多重背景和邊框效果 [3]
◎進(jìn)入論壇網(wǎng)頁(yè)制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。
|
第 1 頁(yè) 
第 2 頁(yè) css2.1實(shí)現(xiàn)多重背景和邊框效果 [2]
