99re热这里只有精品视频,7777色鬼xxxx欧美色妇,国产成人精品一区二三区在线观看,内射爽无广熟女亚洲,精品人妻av一区二区三区

CSS半透明屬性介紹及代碼實例

2020-11-12 18:09 更新

當(dāng)我們在做網(wǎng)頁的時候，有時為了整體頁面搭配的美觀，需要設(shè)置層樣式為透明或者半透明，因為透明往往能產(chǎn)生不錯的網(wǎng)頁視覺效果。在使用的背景的頁面中，如果不設(shè)置頁面內(nèi)容區(qū)為半透明狀態(tài)，突出不了背景的作用，也顯得不那么協(xié)調(diào)。用傳統(tǒng)的 CSS 實現(xiàn)背景半透明效果的方法是用兩個層，一個放文字，另一個做透明背景，但是透明濾鏡的效果會影響到里面的內(nèi)容。如果只需要在IE下實現(xiàn)，是有更簡單的方法可以實現(xiàn)的。

CSS半透明屬性

兼容主流瀏覽器的 CSS 透明代碼:

.transparent_class {

filter:alpha(opacity=50);

-moz-opacity:0.5;

-khtml-opacity: 0.5;

opacity: 0.5;

}

上面的幾個屬性分別是:

①opacity: 0.5; 這是最重要的，因為它是 CSS 標(biāo)準(zhǔn).該屬性支持 Firefox, Safari 和 Opera.

②filter:alpha(opacity=50); 這個是為 IE6 設(shè)的，可取值在 0-100，其它三個 0 到 1.

③-moz-opacity:0.5; 這個是為了支持一些老版本的 Mozilla 瀏覽器。

④-khtml-opacity: 0.5; 這個為了支持一些老版本的 Safari 瀏覽器。

CSS 透明度繼承問題

CSS 的透明屬性涉及到一個繼承問題，當(dāng)為父級元素設(shè)置透明度后，子元素將自動繼承其透明度，比如下圖的效果:


css透明度繼承


即使你又為子元素指定透明度為1也是無效的。


對于子元素是文字的情況，一般的解決方法是如果多少還能夠看清，就不管。另一個折中的方法是，為文本子元素指定一個相對更深的顏色。也就是說，當(dāng)子元素繼承透明度后，所得到的文本顏色正好就是你想要的。前提是這個顏色還有加深的可能，和需要詳細(xì)的計算顏色和透明度的值。


還有“取消透明度繼承”的說法，這個說法是不太準(zhǔn)確的，實際上沒有任何取消透明度繼承的方法。只能說，當(dāng)想要實現(xiàn)“多個元素覆蓋，只讓指定的元素透明”時，可以使用的一些Hack。


還有一種不錯的實現(xiàn)方法：添加一個空元素作為透明層，和不想透明但是要實現(xiàn)覆蓋效果的元素為同級元素。父級元素使用 position:relative 定位; 兩個子元素使用 position:absolute 定位，實現(xiàn)覆蓋。具體解釋說明請點擊本鏈接


半透明

IE下實現(xiàn)半透明

HTML代碼：

<div class="alpha1"> 

<div class="ap2"> 

<p>背景為紅色(#FF0000)，透明度20%。</p> 

</div> 

</div>

CSS代碼：

.alpha1{  

width:300px;  

height:200px;  

background-color:#FF0000;  

filter:Alpha(Opacity=30);  }  

.ap2{  

position:relative;   }

實例

.alpha1{  

width:300px;  

height:200px;  

background-color:#FF0000;  

filter:Alpha(Opacity=30);  }


嘗試一下 ?

兼容FF、OP的寫法：

兩個層重疊的方法改下頁面結(jié)構(gòu)與CSS樣式

HTML代碼：

<div class="alpha1"> 

<div class="ap2"> 

<p>背景為紅色(#FF0000)，透明度20%。</p> 

</div> 

<div class="alpha2"> 

</div>

</div>

CSS代碼：

.alpha1,.alpha2{  

width:100%;  

height:auto;  

min-height:250px;/*必需*/  

_height:250px;/*必需*/  

overflow:hidden;  

background-color:#FF0000;/*背景色*/  }  

 .alpha1{  

filter:alpha(opacity=20);/*IE透明度20%*/  }  

.alpha2{  

background-color:#FFFFFF;  

-moz-opacity:0.8;/*MozFF透明度20%*/  

opacity:0.8;/*支持CSS3的瀏覽器（FF1.5也支持）透明度20%*/  }  

.ap2{  

position:absolute;  }  

實例

.alpha1,.alpha2{  

width:100%;  

height:auto;  

min-height:250px;/*必需*/  

_height:250px;/*必需*/  

overflow:hidden;  

background-color:#FF0000;/*背景色*/  } 


嘗試一下 ?


以上內(nèi)容是否對您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號