網站首頁健康小知識母嬰教育起名運動知識職場理財情感生活綠色生活遊戲數碼美容特色美食愛好

CSS系列：[1]CSS實現半透明div層的方法

欄目: 攝影 / 發佈於: / 人氣:2.52W

首先，先看一下實例，如下：
<html
xmlns="">
<head>
<meta
http-equiv="Content-Type" content="text/html; charset=gb2312"
/>
<style>
#DIV1 { margin:0px
auto; width:500px; height:370px ; text-align:center;
background:url(../demoimg/3.jpg);}
#div2 { height:330px;
filter:alpha(Opacity=80);/*支持 IE 瀏覽器*/
-moz-opacity:0.5;*支持 FireFox 瀏覽器*/
opacity: 0.5;/*支持 Chrome, Opera, Safari 等瀏覽器*/
z-index:100;
background-color:#ffffff; }
</style>
</head>
<body>
<div
id="div1">
<div style="padding:20px;">
<div
id="div2">
這裏是透明的DIV
</div>
</div>
</div>
</body>
</html>
然後，在需要透明層div加CSS代碼
div{filter:alpha(opacity=50); /*支持 IE 瀏覽器*/-moz-opacity:0.50; /*支持
FireFox 瀏覽器*/opacity:0.50; /*支持 Chrome, Opera, Safari 等瀏覽器*/}
這樣就可以實現CSS半透明

操作方法

（01）主要應用的代碼有：filter:alpha(Opacity=80);/*支持 IE 瀏覽器*/-moz-opacity:0.5;*支持 FireFox 瀏覽器*/opacity: 0.5;/*支持 Chrome, Opera, Safari 等瀏覽器*/z-index:100;/*此處為所在層數，儘可能設置大點*/

（02）代碼如下：<html xmlns=""><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><style>#div1 { margin:0px auto; width:500px; height:370px ; text-align:center; background:url(../demoimg/3.jpg);}#div2 { height:330px;filter:alpha(Opacity=80);/*支持 IE 瀏覽器*/-moz-opacity:0.5;*支持 FireFox 瀏覽器*/opacity: 0.5;/*支持 Chrome, Opera, Safari 等瀏覽器*/z-index:100;background-color:#ffffff; }</style></head><body><div id="div1"><div style="padding:20px;"><div id="div2">這裏是透明的DIV</div></div></div></body></html>

（03）下面我們來見證一下代碼實際效果吧！

特別提示

img背景圖片路徑不要設置錯了

要想適配所有的瀏覽器，上面的背景透明都要寫上

Tags：CSS 1CSS DIV 半透明