CSS3不全透明度案例解读

2020-10-18 05:33 jianzhan

怎样设定全透明度?界定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⑻" />  
  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>  

演试实际效果图:

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助。