纯css实现div透明度控制调节的方法

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

源码:

  1. <html xmlns="http://www.w3.org/1999/xhtml">
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  4. <title>半透明div</title>
  5. <style>
  6. #div1 { margin:0px auto; width:500px; height:370px ; text-align:center; background:url(/jscss/demoimg/wall3.jpg);}
  7. #div2 { height:330px; filter:alpha(Opacity=80);-moz-opacity:0.5;opacity: 0.5;z-index:100; background-color:#ffffff;}
  8. </style>
  9. </head>
  10. <body>
  11. <div id="div1"> 
  12.  <div style="padding:20px;"><div id="div2">这里是透明的DIV</div></div>
  13. </div>
  14. </body>
  15. </html>

分享到:

用微信扫一扫,分享给朋友


发布日期:

所属分类: Css/Html5 标签: