CSS3不透明度实例讲解

前端技术 2023/09/01 CSS

如何设置透明度?定义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>  

演示效果图:

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

本文地址:https://www.stayed.cn/item/2751

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见,何事秋风悲画扇。