CSS3不透明度实例讲解

再看那柔弱的柳树吧,在寒冬余威尚盛时节,就早早苏醒过来,望着冰冻的河面,迎着凛冽的寒风,它微微察觉出一丝春意,于是,不顾一切地率先吐翠,淡淡地披起娇黄嫩绿的新装。沿河望去,枝梢间烟纱雾彀,一片生机,这情景仿佛一首动人的歌,一首热烈向往春天的歌,一首报告春的信息的歌,一首表达美好信念的歌。我在想:既然迎春花被人称作报春花,那么,柳树可不可以叫作报春树呢春来了,万千柳枝在春风中袅袅舞动。柳树是热爱春天的,春天也是热爱柳树的。

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

<alphavalue>|inherit

取值说明:

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

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

3、针对IE浏览器,可以使用它的私有属性filter来兼容:filter:alpha(alpha=value);。

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

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <htmlxmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
  5. <title>opacity</title>
  6. <styletype="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. <body>
  26. <divclass="web"><imgsrc="images/web_bg_9.jpg"width="1259"height="630"/></div>
  27. <divclass="bg"></div>
  28. <divclass="lightbox"><imgsrc="images/web_bg_10.png"width="80%"/></div>
  29. </body>

演示效果图:

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

您可能有感兴趣的文章
css如何实现背景半透明文字不透明的效果示例

CSS3如何实现背景透明文字不透明的示例代码

纯css如何实现背景图片半透明内容不透明的方法

CSS如何实现背景透明文字不透明的可行方法(兼容各浏览器)

让div透明而里面的文字不透明的写法