纯css调节透明度

很不错的CSS透明效果,本实例是用CSS控制外层DIV不透明,而内层DIV透明,这样实现的效果是意想不到的,还不错吧,其实代码也是很简单的,也很好理解,主要是div2层用了CSS的滤镜,并把它的显示层数设置的高一点,这里设置为100,背景颜色设置为白色,效果更好一点。

源码:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>半透明div</title>
<style>
#div1 { margin:0px auto; width:500px; height:370px ; text-align:center; background:url(/jscss/demoimg/wall3.jpg);}
#div2 { height:330px; filter:alpha(Opacity=80);-moz-opacity:0.5;opacity: 0.5;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>
微信公众号
手机浏览(小程序)
0
分享到:
没有账号? 忘记密码?