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

在單個HTML元素上利用CSS2.1實現(xiàn)擁有3張背景圖片和2張內(nèi)容圖效果,或者多重邊框的效果。這種漸進增強的方式適用于所有支持CSS2.1偽元素及其定位屬性的所有瀏覽器。不需要CSS3的支持。
支持的瀏覽器:Firefox 3.5+, Safari 4+, chrome4+, opera10+, IE8+是如何實現(xiàn)的呢?
從本質(zhì)上講,我們所創(chuàng)建的偽對象(:before和:after)跟我們在對待HTML元素嵌套關(guān)系是相同的。但他們相對于嵌套使用的HTML元素而言具有其獨特的優(yōu)勢——不具有語義化。
當(dāng)使用多背景或者多重邊框的時候,我們需要將偽元素層的內(nèi)容利用絕對定位固定在HTML元素內(nèi)容的后面。
并非真實的內(nèi)容被偽元素所包含進行定位。這意味著他們能在“父”元素范圍內(nèi)隨意拉伸的同時而不會影響其內(nèi)容。這可以任意組合絕對定位的top、right、bottom、left、width和height的值,主要關(guān)鍵是他們的組合性能是靈活的。
可以達(dá)到什么效果?
僅需要依賴于一個HTML元素和相關(guān)的圖片就可以創(chuàng)建類似于多背景顏色、多背景圖、背景圖片剪輯、圖片翻轉(zhuǎn)、使用圖片邊框的可擴展的盒模型、浮動的虛假列(小志注:后面會提到的三列等高效果)、在盒模型外的圖片、顯示在外面的多邊框,以及其他流行的效果等??赡苄枰?張額外的內(nèi)容圖片在生成的內(nèi)容中。
在使用CSS2.1的多背景和使用CSS2.1的多邊框演示頁面中將會展示如何使用CSS2.1偽對象的技術(shù)實現(xiàn)這些流行的效果。
大部分的結(jié)構(gòu)都包含子元素。因此,往往很多時候,你將有可能通過父元素的第一個子元素(設(shè)置是最后一個子元素)的偽元素來展示更多的效果。此外,還可以通過:hover對樣式產(chǎn)生一些復(fù)雜的交互效果的變化。
示例代碼:多背景圖片
使用這種技術(shù)我們可以重現(xiàn)類似于Silverback網(wǎng)站中只使用一個HTML元素的多背景圖片效果。
該元素?fù)碛凶约旱谋尘皥D片和需要填充的空間。將該元素相對定位后作為其偽元素的絕對定位參考點。使用正值的z-index將有助于偽元素選擇合適的z-index值(小志注:對于這句的翻譯思考了很久一直沒能選擇合適的詞來表達(dá),主要的意思根據(jù)下面的代碼我們可以看到是將偽元素的z-index值設(shè)置比元素自身的小即可,最好是用負(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;
}
兩個偽元素將會通過絕對定位的方式固定在該元素的兩邊。設(shè)置z-index值為-1將偽元素移到內(nèi)容層的后面。這樣偽元素將會位于元素的背景和邊框上面,但是該元素的內(nèi)容依然可以選擇。
#silverback:before,
#silverback:after {
position:absolute;
z-index:-1;
top:0;
left:0;
right:0;
bottom:0;
padding-top:100px;
}
每個偽元素都擁有一個可重復(fù)的背景圖片屬性。這是實現(xiàn)類型多重背景效果所需要的。
偽元素的content屬性允許添加圖片內(nèi)容。這樣我們就可以添加兩張圖片在一個偽元素中??梢酝ㄟ^改變偽元素的其他屬性改變圖片的位置,例如text-align和padding。
#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的多重背景圖效果成品。
示例代碼:浮動的虛假列
另外一個應(yīng)用是創(chuàng)建一個不需要圖片或者額外嵌套容器的等高列(小志注:這里展示的是三列等高的效果)。
這個HTML結(jié)構(gòu)非常簡單。我曾經(jīng)依賴于CSS2.1選擇器使用特定類名在每一個子元素的div標(biāo)簽上,但IE6不支持。假如不需要IE6的支持的話,并不需要指定類名。
<div id="faux">
<div class="main">[content]</div>
<div class="supp1">[content]</div>
<div class="supp2">[content]</div>
</div>
對這個擁有百分比的容器再次設(shè)置相對定位以及正值的z-index。應(yīng)用overflow:hidden;主要是為了包含其子元素浮動后的容器(小志注:也就是清除浮動的一種方式),以及隱藏溢出的偽元素。背景顏色將作為其中一列的背景色。
#faux {
position:relative;
z-index:1;
width:80%;
margin:0 auto;
overflow:hidden;
background:#ffaf00;
}
通過定義子元素的div標(biāo)簽為相對定位之后,還可以控制單獨列的位置。
#faux div {
position:relative;
float:left;
width:30%;
}
#faux .main {left:35%}
#faux .supp1 {left:-28.5%}
#faux .supp2 {left:8.5%}
另外百分百高度的兩列被建立于定位的位置和定位屬性的偽元素,同時設(shè)置了背景色。這些背景可以用(重復(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)生簡單的效果。
元素必須具有相對定位屬性,并且在需要有填充產(chǎn)生足夠的寬度給由偽元素創(chuàng)建的額外的邊框。
#borders {
position:relative;
z-index:1;
padding:30px;
border:5px solid #f00;
background:#ff9600;
}
將偽元素絕對定位在盒子中,并明確與元素盒模型邊距之間的距離,設(shè)置z-index值為負(fù)值后移動到內(nèi)容層的后面,同時設(shè)置你所需要的邊框色和背景色。
#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;
}
就是這么簡單。一個使用CSS2.1的多邊框效果成品就有了。
漸進增強和傳統(tǒng)瀏覽器
IE6和IE7不支持CSS2.1偽元素,將會忽略所有:before和:after聲明。它們沒有任何增強,但保留著基本的使用習(xí)慣。
關(guān)于Firefox 3.0的一個警告
Firefox 3.0雖然支持CSS2.1偽元素但不支持其定位。雖然沒有支持這部分的效果,但另一些完全不受影響,并且不知道后續(xù)的Firefox 3.0版本將會什么時候優(yōu)化成完美支持這種技術(shù)。有時,可以通過定義display:block樣式屬性可以改進偽元素的外觀樣式。
使用目前的方式,要求其定位偽元素,建議考慮Firefox 3.0支持的重要性和您的用戶目前使用的瀏覽器比例。
翻譯之外的東西,一點點個人看法
這篇文章我不知道是什么時候有的,不過原文后面是對CSS3的屬性一些內(nèi)容,我拋棄了,因為當(dāng)時看到這篇文章主要是沖著使用CSS2.1的偽對象方式實現(xiàn)效果而去的。當(dāng)我看到文章中提到用偽對象實現(xiàn)三列等高的時候,我表示十分驚訝,大概分析了一下這樣的等高處理方式也存在著一點點小問題,比如背景圖片定位(不支持偽對象的瀏覽器不考慮在內(nèi)了)。順帶說一下,曾經(jīng)考慮過在偽對象的content屬性中增加圖片,但一直以為是不可能實現(xiàn)的,就沒嘗試了,現(xiàn)在看到了,我也明白了,凡事只有嘗試過后才能去確認(rèn)!
相關(guān)文章
- CSS Grid 是一種二維布局系統(tǒng),可以同時控制行和列,相比 Flex(一維布局),更適合用在整體頁面布局或復(fù)雜模塊結(jié)構(gòu)中,這篇文章主要介紹了前端CSS Grid 布局詳解,需要的朋2025-04-16
CSS Padding 和 Margin 區(qū)別全解析
CSS 中的 padding 和 margin 是兩個非?;A(chǔ)且重要的屬性,它們用于控制元素周圍的空白區(qū)域,本文將詳細(xì)介紹 padding 和 margin 的概念、區(qū)別以及如何在實際項目中使用它們2025-04-07- will-change 是一個 CSS 屬性,用于告訴瀏覽器某個元素在未來可能會發(fā)生哪些變化,本文給大家介紹CSS will-change 屬性詳解,感興趣的朋友一起看看吧2025-04-07
- 本文給大家分享在 CSS 中,去除a標(biāo)簽(超鏈接)的下劃線的幾種方法,本文給大家介紹的非常詳細(xì),感興趣的朋友一起看看吧2025-04-07
- 在前端開發(fā)中,CSS(層疊樣式表)不僅是用來控制網(wǎng)頁的外觀和布局,更是實現(xiàn)復(fù)雜交互和動態(tài)效果的關(guān)鍵技術(shù)之一,隨著前端技術(shù)的不斷發(fā)展,CSS的用法也日益豐富和高級,本文將2025-04-07
css中的 vertical-align與line-height作用詳解
文章詳細(xì)介紹了CSS中的`vertical-align`和`line-height`屬性,包括它們的作用、適用元素、屬性值、常見使用場景、常見問題及解決方案,感興趣的朋友跟隨小編一起看看吧2025-03-26淺析CSS 中z - index屬性的作用及在什么情況下會失效
z-index屬性用于控制元素的堆疊順序,值越大,元素越顯示在上層,它需要元素具有定位屬性(如relative、absolute、fixed或sticky),本文給大家介紹CSS 中z - index屬性的作用2025-03-21- 文章詳細(xì)介紹了CSS中的打印媒體查詢@mediaprint包括基本語法、常見使用場景和代碼示例,如隱藏非必要元素、調(diào)整字體和顏色、處理鏈接的URL顯示、分頁控制、調(diào)整邊距和背景等2025-03-18
CSS模擬 html 的 title 屬性(鼠標(biāo)懸浮顯示提示文字效果)
本文介紹了如何使用CSS模擬HTML的title屬性,通過鼠標(biāo)懸浮顯示提示文字效果,通過設(shè)置`.tipBox`和`.tipBox.tipContent`的樣式,實現(xiàn)了提示內(nèi)容的隱藏和顯示,感興趣的朋友一起2025-03-10前端 CSS 動態(tài)設(shè)置樣式::class、:style 等技巧(推薦)
本文介紹了Vue.js中動態(tài)綁定類名和內(nèi)聯(lián)樣式的兩種方法:對象語法和數(shù)組語法,通過對象語法,可以根據(jù)條件動態(tài)切換類名或樣式;通過數(shù)組語法,可以同時綁定多個類名或樣式,此外2025-02-26