使用css讓div半透明

2022-05-06 07:09:08 字數 473 閱讀 2833

設定div的背景為半透明,下面有個不錯示例,使用div+css來實現下,不會的朋友可以參考下

div 

說明: 

1、filter:對win ie設定半透明濾鏡效果,filter:alpha(opacity=80)代表該物件80%半透明,火狐瀏覽器不認 

2、-moz-opacity:對mozilla firefox火狐瀏覽器實現半透明,win ie不認此屬性,-moz-opacity:0.5相當於設定半透明為50% 

3、opacity:對除ie外所有瀏覽器支援包括谷歌,放最後主要針對谷歌瀏覽器,opacity: 0.5;表示設定50%半透明 

為了觀察到對div半透明實現,我們設定兩個div層,分別乙個放於另外乙個div層內,外層div命名為「.div-a」;上面被包含的層css類命名為「.div-b」,形成「.div-b」盒子放於「.div-a」內

我們對底層div設定乙個背景是一張,上面的div盒子設定村黑色。  

CSS如何設定div半透明效果

css如何設定div半透明效果 設定元素的透明度在很多應用中都有使用,下面就介紹一下如何設定乙個元素為半透明,其他的透明效果自己衍伸就可以了。例項如下 opacity屬性所以標準瀏覽器都支援,但是ie8和ie8以下瀏覽器不支援此屬性,於是就使用filter alpha opacity 50 進行相容...

《CSS揭秘》半透明邊框

效果展示 展示 doctype html en utf 8 viewport content width device width,initial scale 1.0 半透明邊框 title body div style head 我有乙個半透明的邊框呦 div body html 預設情況下,背景...

CSS揭秘 半透明邊框

技巧 實現乙個半透明的邊框 預備知識background clip background clip 設定元素背景是否延伸到邊框下面,如果沒有設定背景顏色或者,那麼這個屬性只有在邊框設定為透明或者半透明時才能看到視覺效果。否則這個屬性造成的樣式變化會被元素邊框所覆蓋。預設值為 border box 沒...