黑松山资源网

CSS3不透明度实例讲解
站长资源 2024/11/15 佚名
2 0
黑松山资源网 Design By www.paidiu.com

如何设置透明度？定义opacity属性，通过设置该属性能够使任何元素呈现出半透明效果，opacity属性的基本语法如下：

<alphavalue>|inherit

取值说明：

1、<alphavalue>|是由浮点数和单位标识符组成的长度值。不可为负值，默认值为1.opacity取值为1时，则元素为完全不透明的；反之，取值为0时，元素是完全透明的，不可见。

2、inherit表示继承，即继承父元素的不透明性。

3、针对IE浏览器，可以使用它的私有属性filter来兼容：filter：alpha（alpha=value）；。

实例：设计灯箱广告背景布

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5. <title>opacity</title>  
  6. <style type="text/css">  
  7. body {   
  8.     margin:0;   
  9.     padding:0;   
  10. }   
  11. div { position:absolute; }   
  12. .bg {   
  13.     width:100%;   
  14.     height:100%;   
  15.     background:#000;   
  16.     opacity:0.7;   
  17.     filter:alpha(opacity=70);   
  18. }   
  19. .lightbox {   
  20.     left:50px;   
  21.     top:50px;   
  22. }   
  23. </style>  
  24. </head>  
  25.   
  26. <body>  
  27. <div class="web"><img src="images/web_bg_9.jpg" width="1259" height="630" /></div>  
  28. <div class="bg"></div>  
  29. <div class="lightbox"><img src="images/web_bg_10.png" width="80%" /></div>  
  30. </body>  

演示效果图：

CSS3不透明度实例讲解

以上就是本文的全部内容，希望对大家的学习有所帮助。

黑松山资源网 Design By www.paidiu.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
黑松山资源网 Design By www.paidiu.com
www.paidiu.com 黑松山资源网
39,976影音资源
44,792技术资源
21,817软件资源
651,128站长资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网 更多链接
黑松山资源网 Design By www.paidiu.com