css2.1多重背景和邊框效果實(shí)現(xiàn)原理及代碼(圖文介紹)

發(fā)布時(shí)間：2012-12-24 11:48:42 作者：佚名

在單個(gè)HTML元素上利用CSS2.1實(shí)現(xiàn)擁有3張背景圖片和2張內(nèi)容圖效果，或者多重邊框的效果。這種漸進(jìn)增強(qiáng)的方式適用于所有支持CSS2.1偽元素及其定位屬性的所有瀏覽器,需要的朋友可以了解下

在單個(gè)HTML元素上利用CSS2.1實(shí)現(xiàn)擁有3張背景圖片和2張內(nèi)容圖效果，或者多重邊框的效果。這種漸進(jìn)增強(qiáng)的方式適用于所有支持CSS2.1偽元素及其定位屬性的所有瀏覽器。不需要CSS3的支持。

支持的瀏覽器：Firefox 3.5+， Safari 4+， chrome4+， opera10+， IE8+

是如何實(shí)現(xiàn)的呢？

從本質(zhì)上講，我們所創(chuàng)建的偽對(duì)象（：before和：after）跟我們?cè)趯?duì)待HTML元素嵌套關(guān)系是相同的。但他們相對(duì)于嵌套使用的HTML元素而言具有其獨(dú)特的優(yōu)勢——不具有語義化。

當(dāng)使用多背景或者多重邊框的時(shí)候，我們需要將偽元素層的內(nèi)容利用絕對(duì)定位固定在HTML元素內(nèi)容的后面。

并非真實(shí)的內(nèi)容被偽元素所包含進(jìn)行定位。這意味著他們能在“父”元素范圍內(nèi)隨意拉伸的同時(shí)而不會(huì)影響其內(nèi)容。這可以任意組合絕對(duì)定位的top、right、bottom、left、width和height的值，主要關(guān)鍵是他們的組合性能是靈活的。

可以達(dá)到什么效果？

僅需要依賴于一個(gè)HTML元素和相關(guān)的圖片就可以創(chuàng)建類似于多背景顏色、多背景圖、背景圖片剪輯、圖片翻轉(zhuǎn)、使用圖片邊框的可擴(kuò)展的盒模型、浮動(dòng)的虛假列（小志注：后面會(huì)提到的三列等高效果）、在盒模型外的圖片、顯示在外面的多邊框，以及其他流行的效果等?？赡苄枰?張額外的內(nèi)容圖片在生成的內(nèi)容中。

在使用CSS2.1的多背景和使用CSS2.1的多邊框演示頁面中將會(huì)展示如何使用CSS2.1偽對(duì)象的技術(shù)實(shí)現(xiàn)這些流行的效果。

大部分的結(jié)構(gòu)都包含子元素。因此，往往很多時(shí)候，你將有可能通過父元素的第一個(gè)子元素（設(shè)置是最后一個(gè)子元素）的偽元素來展示更多的效果。此外，還可以通過：hover對(duì)樣式產(chǎn)生一些復(fù)雜的交互效果的變化。

示例代碼：多背景圖片

使用這種技術(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ù)值）。

復(fù)制代碼

代碼如下:

#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)容依然可以選擇。

復(fù)制代碼

代碼如下:

#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。

復(fù)制代碼

代碼如下:

#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的多重背景圖效果成品。

示例代碼：浮動(dòng)的虛假列

另外一個(gè)應(yīng)用是創(chuàng)建一個(gè)不需要圖片或者額外嵌套容器的等高列（小志注：這里展示的是三列等高的效果）。

這個(gè)HTML結(jié)構(gòu)非常簡單。我曾經(jīng)依賴于CSS2.1選擇器使用特定類名在每一個(gè)子元素的div標(biāo)簽上，但I(xiàn)E6不支持。假如不需要IE6的支持的話，并不需要指定類名。

復(fù)制代碼

代碼如下:

<div id="faux">
<div class="main">[content]</div>
<div class="supp1">[content]</div>
<div class="supp2">[content]</div>
</div>

對(duì)這個(gè)擁有百分比的容器再次設(shè)置相對(duì)定位以及正值的z-index。應(yīng)用overflow:hidden;主要是為了包含其子元素浮動(dòng)后的容器（小志注：也就是清除浮動(dòng)的一種方式），以及隱藏溢出的偽元素。背景顏色將作為其中一列的背景色。

復(fù)制代碼

代碼如下:

#faux {
position:relative;
z-index:1;
width:80%;
margin:0 auto;
overflow:hidden;
background:#ffaf00;
}

通過定義子元素的div標(biāo)簽為相對(duì)定位之后，還可以控制單獨(dú)列的位置。

復(fù)制代碼

代碼如下:

#faux div {
position:relative;
float:left;
width:30%;
}

#faux .main {left:35%}
#faux .supp1 {left:-28.5%}
#faux .supp2 {left:8.5%}

另外百分百高度的兩列被建立于定位的位置和定位屬性的偽元素，同時(shí)設(shè)置了背景色。這些背景可以用（重復(fù)的）圖片代替，如果有需要的話。

復(fù)制代碼

代碼如下:

#faux:before,
#faux:after {
content:"";
position:absolute;
z-index:-1;
top:0;
left:33.333%;
width:100%;
height:100%;
background:#f9b6ff;
}

#faux:after {
left:66.667%;
background:#79daff;
}

使用CSS2.1的多重背景效果成品

示例代碼：多邊框

多邊框的處理方式有很多相類似之處。利用這些方式可以避免使用圖片而產(chǎn)生簡單的效果。

元素必須具有相對(duì)定位屬性，并且在需要有填充產(chǎn)生足夠的寬度給由偽元素創(chuàng)建的額外的邊框。

復(fù)制代碼

代碼如下:

#borders {
position:relative;
z-index:1;
padding:30px;
border:5px solid #f00;
background:#ff9600;
}

將偽元素絕對(duì)定位在盒子中，并明確與元素盒模型邊距之間的距離，設(shè)置z-index值為負(fù)值后移動(dòng)到內(nèi)容層的后面，同時(shí)設(shè)置你所需要的邊框色和背景色。

復(fù)制代碼

代碼如下:

#borders:before {
content:"";
position:absolute;
z-index:-1;
top:5px;
left:5px;
right:5px;
bottom:5px;
border:5px solid #ffea00;
background:#4aa929;
}
#borders:after {
content:"";
position:absolute;
z-index:-1;
top:15px;
left:15px;
right:15px;
bottom:15px;
border:5px solid #00b4ff;
background:#fff;
}

就是這么簡單。一個(gè)使用CSS2.1的多邊框效果成品就有了。

漸進(jìn)增強(qiáng)和傳統(tǒng)瀏覽器

IE6和IE7不支持CSS2.1偽元素，將會(huì)忽略所有：before和：after聲明。它們沒有任何增強(qiáng)，但保留著基本的使用習(xí)慣。

關(guān)于Firefox 3.0的一個(gè)警告

Firefox 3.0雖然支持CSS2.1偽元素但不支持其定位。雖然沒有支持這部分的效果，但另一些完全不受影響，并且不知道后續(xù)的Firefox 3.0版本將會(huì)什么時(shí)候優(yōu)化成完美支持這種技術(shù)。有時(shí)，可以通過定義display:block樣式屬性可以改進(jìn)偽元素的外觀樣式。

使用目前的方式，要求其定位偽元素，建議考慮Firefox 3.0支持的重要性和您的用戶目前使用的瀏覽器比例。

翻譯之外的東西，一點(diǎn)點(diǎn)個(gè)人看法

這篇文章我不知道是什么時(shí)候有的，不過原文后面是對(duì)CSS3的屬性一些內(nèi)容，我拋棄了，因?yàn)楫?dāng)時(shí)看到這篇文章主要是沖著使用CSS2.1的偽對(duì)象方式實(shí)現(xiàn)效果而去的。當(dāng)我看到文章中提到用偽對(duì)象實(shí)現(xiàn)三列等高的時(shí)候，我表示十分驚訝，大概分析了一下這樣的等高處理方式也存在著一點(diǎn)點(diǎn)小問題，比如背景圖片定位（不支持偽對(duì)象的瀏覽器不考慮在內(nèi)了）。順帶說一下，曾經(jīng)考慮過在偽對(duì)象的content屬性中增加圖片，但一直以為是不可能實(shí)現(xiàn)的，就沒嘗試了，現(xiàn)在看到了，我也明白了，凡事只有嘗試過后才能去確認(rèn)！