主頁 > 知識庫 > CSS透明屬性詳解代碼

CSS透明屬性詳解代碼

熱門標(biāo)簽:南通電銷外呼系統(tǒng)軟件 廣州防封電銷機(jī)器人廠家 上海400電話辦理到易號網(wǎng) 洛陽防封卡外呼系統(tǒng)廠家 申請400電話移動 山東電銷機(jī)器人軟件 常州電話外呼系統(tǒng)招商 智能語音電銷機(jī)器人客戶端 成都企業(yè)外呼系統(tǒng)
透明往往能產(chǎn)生不錯的網(wǎng)頁視覺效果,先奉上兼容主流瀏覽器的CSS透明代碼:
復(fù)制代碼 代碼如下:

.transparent_class {
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}
 

上面的幾個(gè)屬性分別是:
opacity: 0.5; 這是最重要的,因?yàn)樗荂SS標(biāo)準(zhǔn).該屬性支持Firefox, Safari和 Opera.
filter:alpha(opacity=50); 這個(gè)是為IE6設(shè)的,可取值在0-100,其它三個(gè)0到1.
-moz-opacity:0.5; 這個(gè)是為了支持一些老版本的Mozilla瀏覽器。
-khtml-opacity: 0.5; 這個(gè)為了支持一些老版本的Safari瀏覽器。
CSS透明度繼承問題
但CSS的透明屬性涉及到一個(gè)繼承問題,當(dāng)為父級元素設(shè)置透明度后,子元素將自動繼承其透明度,即使你又為子元素指定透明度為1也是無效的。
對于子元素是文字的情況,我的解決方法一般是如果多少還能夠看清,就不管。另一個(gè)折衷的方法是,為文本子元素指定一個(gè)相對更深的顏色。也就是說,當(dāng)子元素繼承透明度后,所得到的文本顏色正好就是你想要的。前提是,這個(gè)顏色還有加深的可能,和需要詳細(xì)的計(jì)算顏色和透明度的值。
還有"取消透明度繼承”的說法,這個(gè)說法是不太準(zhǔn)確的,據(jù)我個(gè)人所知,沒有任何取消透明度繼承的方法。只能說,當(dāng)想要實(shí)現(xiàn)"多個(gè)元素覆蓋,只讓指定的元素透明”時(shí),可以使用的一些Hack。
搜了一下,找到一個(gè)不錯的實(shí)現(xiàn)這種效果的方法 – 一個(gè)關(guān)于透明繼承度的問題,有興趣的朋友可以看看。原理很簡單,添加一個(gè)空元素作為透明層,和不想透明但是要實(shí)現(xiàn)覆蓋效果的元素為同級元素。父級元素使用position:relative定位; 兩個(gè)子元素使用position:absolute定位,實(shí)現(xiàn)覆蓋。
html代碼:
 
復(fù)制代碼 代碼如下:

div class="div3">div class="div4">/div>這里文字圖片都沒透明度了
div class="div2">圖片/div>
/div>

CSS代碼
復(fù)制代碼 代碼如下:

body {
background-image: url(./105247.png);
background-repeat: repeat;
}
.div2{ width:100px; height:100px; background: url(./testbok.png)}
.div3{ width:200px; height:200px; position:relative; margin-top:10px}
.div4{  position:absolute; top:0; height:200px; width:200px; z-index:-1; background:#FFFFFF;filter:alpha(opacity=70);opacity:0.7;}
 

如果你外面的容器高度是不定的,那么只要把div3的高度設(shè)置的足夠的高度就可以了
這個(gè)方法有個(gè)很不好的缺點(diǎn):多了一個(gè)空白的div
您可能感興趣的文章:
  • CSS繪制五角星
  • css樣式標(biāo)簽和js語法屬性區(qū)別
  • js控制不同的時(shí)間段顯示不同的css樣式的實(shí)例代碼
  • 純CSS繪制三角形(各種角度)
  • css類選擇器的使用方法詳解

標(biāo)簽:廣安 萊蕪 混顯 貴州 鶴壁 滄州 賀州 邵陽

巨人網(wǎng)絡(luò)通訊聲明:本文標(biāo)題《CSS透明屬性詳解代碼》,本文關(guān)鍵詞  CSS,透明,屬性,詳解,代碼,;如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題,煩請?zhí)峁┫嚓P(guān)信息告之我們,我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò),涉及言論、版權(quán)與本站無關(guān)。
  • 相關(guān)文章
  • 下面列出與本文章《CSS透明屬性詳解代碼》相關(guān)的同類信息!
  • 本頁收集關(guān)于CSS透明屬性詳解代碼的相關(guān)信息資訊供網(wǎng)民參考!
  • 推薦文章