熱烈祝賀臺州維博網絡的站長論壇隆重上線!(2012-05-28)    熱烈慶祝偉大的祖國60周年生日 點擊進來我們一起為她祝福吧(2009-09-26)    站長論壇禁止發布廣告,一經發現立即刪除。謝謝各位合作!.(2009-08-08)    熱烈祝賀臺州網址導航全面升級,全新版本上線!希望各位一如既往地支持臺州網址導航的發展.(2009-03-28)    臺州站長論壇恭祝各位新年快樂,牛年行大運!(2009-01-24)    臺州Link正式更名為臺州網址導航,專業做以臺州網址為主的網址導航!(2008-05-23)    熱烈祝賀臺州Link資訊改名為中國站長資訊!希望在以后日子里得到大家的大力支持和幫助!(2008-04-10)    熱烈祝賀臺州Link論壇改名為臺州站長論壇!希望大家繼續支持和鼓勵!(2008-04-10)    臺州站長論壇原[社會瑣碎]版塊更名為[生活百科]版塊!(2007-09-05)    特此通知:新臺州站長論壇的數據信息全部升級成功!">特此通知:新臺州站長論壇的數據信息全部升級成功!(2007-09-01)    臺州站長論壇對未通過驗證的會員進行合理的清除,請您諒解(2007-08-30)    臺州網址導航|上網導航誠邀世界各地的網站友情鏈接和友誼聯盟,共同引領網站導航、前進!(2007-08-30)    禁止發廣告之類的帖,已發現立即刪除!(2007-08-30)    希望各位上傳與下載有用資源和最新信息(2007-08-30)    熱烈祝賀臺州站長論壇全面升級成功,全新上線!(2007-08-30)    
便民網址導航,輕松網上沖浪。
臺州維博網絡專業開發網站門戶平臺系統
您當前的位置: 首頁 » DIV+CSS編程 » css2.1實現多重背景和邊框效果

css2.1實現多重背景和邊框效果

論壇鏈接
  • css2.1實現多重背景和邊框效果
  • 發布時間:2010-06-24 11:39:09    瀏覽數:6046    發布者:tznktg    設置字體【   
在單個HTML元素上利用CSS2.1實現擁有3張背景圖片和2張內容圖效果,或者多重邊框的效果。這種漸進增強的方式適用于所有支持CSS2.1偽元素及其定位屬性的所有瀏覽器。不需要CSS3的支持。

演示:使用CSS2.1的多背景

演示:使用CSS2.1的多邊框

支持的瀏覽器:Firefox 3.5+, Safari 4+, chrome4+, opera10+, IE8+

是如何實現的呢?

從本質上講,我們所創建的偽對象(:before和:after)跟我們在對待HTML元素嵌套關系是相同的。但他們相對于嵌套使用的HTML元素而言具有其獨特的優勢——不具有語義化。

當使用多背景或者多重邊框的時候,我們需要將偽元素層的內容利用絕對定位固定在HTML元素內容的后面。



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

可以達到什么效果?

僅需要依賴于一個HTML元素和相關的圖片就可以創建類似于多背景顏色、多背景圖、背景圖片剪輯、圖片翻轉、使用圖片邊框的可擴展的盒模型、浮動的虛假列(小志注:后面會提到的三列等高效果)、在盒模型外的圖片、顯示在外面的多邊框,以及其他流行的效果等?赡苄枰2張額外的內容圖片在生成的內容中。

在使用CSS2.1的多背景和使用CSS2.1的多邊框演示頁面中將會展示如何使用CSS2.1偽對象的技術實現這些流行的效果。

大部分的結構都包含子元素。因此,往往很多時候,你將有可能通過父元素的第一個子元素(設置是最后一個子元素)的偽元素來展示更多的效果。此外,還可以通過:hover對樣式產生一些復雜的交互效果的變化。
      示例代碼:多背景圖片

使用這種技術我們可以重現類似于Silverback網站中只使用一個HTML元素的多背景圖片效果。



該元素擁有自己的背景圖片和需要填充的空間。將該元素相對定位后作為其偽元素的絕對定位參考點。使用正值的z-index將有助于偽元素選擇合適的z-index值(小志注:對于這句的翻譯思考了很久一直沒能選擇合適的詞來表達,主要的意思根據下面的代碼我們可以看到是將偽元素的z-index值設置比元素自身的小即可,最好是用負值)。

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;
}

兩個偽元素將會通過絕對定位的方式固定在該元素的兩邊。設置z-index值為-1將偽元素移到內容層的后面。這樣偽元素將會位于元素的背景和邊框上面,但是該元素的內容依然可以選擇。

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;
}

每個偽元素都擁有一個可重復的背景圖片屬性。這是實現類型多重背景效果所需要的。

偽元素的content屬性允許添加圖片內容。這樣我們就可以添加兩張圖片在一個偽元素中?梢酝ㄟ^改變偽元素的其他屬性改變圖片的位置,例如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的多重背景圖效果成品。
      示例代碼:浮動的虛假列

另外一個應用是創建一個不需要圖片或者額外嵌套容器的等高列(小志注:這里展示的是三列等高的效果)。



這個HTML結構非常簡單。我曾經依賴于CSS2.1選擇器使用特定類名在每一個子元素的div標簽上,但IE6不支持。假如不需要IE6的支持的話,并不需要指定類名。

[Copy to clipboard]View Code XML1
<div id="faux">
<div class="main">[content]</div>
<div class="supp1">[content]</div>
<div class="supp2">[content]</div>
</div>

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

Copy to clipboard]View Code CSS1
#faux {
position:relative;
z-index:1;
width:80%;
margin:0 auto;
overflow:hidden;
background:#ffaf00;
}

通過定義子元素的div標簽為相對定位之后,還可以控制單獨列的位置。

Copy to clipboard]View Code CSS1
#faux div {
position:relative;
float:left;
width:30%;
}

#faux .main {left:35%}
#faux .supp1 {left:-28.5%}
#faux .supp2 {left:8.5%}
另外百分百高度的兩列被建立于定位的位置和定位屬性的偽元素,同時設置了背景色。這些背景可以用(重復的)圖片代替,如果有需要的話。
Copy to clipboard]View Code CSS1
#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的多重背景效果成品。

示例代碼:多邊框

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



元素必須具有相對定位屬性,并且在需要有填充產生足夠的寬度給由偽元素創建的額外的邊框。

Copy to clipboard]View Code CSS1
#borders {
position:relative;
z-index:1;
padding:30px;
border:5px solid #f00;
background:#ff9600;
}

將偽元素絕對定位在盒子中,并明確與元素盒模型邊距之間的距離,設置z-index值為負值后移動到內容層的后面,同時設置你所需要的邊框色和背景色。

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

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

漸進增強和傳統瀏覽器

IE6和IE7不支持CSS2.1偽元素,將會忽略所有:before和:after聲明。它們沒有任何增強,但保留著基本的使用習慣。

關于Firefox 3.0的一個警告

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

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

翻譯之外的東西,一點點個人看法

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

原文:http://blog.linxz.cn/multiple_backgrounds_and_borders_with_css2/
娛樂休閑專區A 影視預告B 音樂咖啡C 英語階梯D 生活百科
網頁編程專區E AMPZF HTMLG CSSH JSI ASPJ PHPK JSPL MySQLM AJAX
Linux技術區 N 系統管理O 服務器架設P 網絡/硬件Q 編程序開發R 內核/嵌入
管理中心專區S 發布網址T 版主議事U 事務處理
陕西快乐10分玩法 选4历史开奖结果上海 浙江体彩6十1第19147期 广西11选5中奖表 江西11选五5任务最大遗漏 股市线上开户 安徽快3综合走势 够力排列五开奖长条 七乐彩走势图 湖北十一选五投注技巧 十一运夺金专家预测