成都网站建设设计

将想法与焦点和您一起共享

CSS3不透明度发实例介绍

这篇文章主要讲解了“CSS3不透明度发实例介绍”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“CSS3不透明度发实例介绍”吧!

成都创新互联公司10多年企业网站建设服务;为您提供网站建设,网站制作,网页设计及高端网站定制服务,企业网站建设及推广,对成都阳光房等多个领域拥有多年设计经验的网站建设公司。

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

|inherit

取值说明:

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

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

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

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

XML/HTML Code复制内容到剪贴板

  1.   

  2.   

  3.   

  4.   

  5. opacity  

  6.   

  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.   

  24.   

  25.   

  26.   

  

  •   

  •   

  •   

  • 演示效果图:

    CSS3不透明度发实例介绍

    感谢各位的阅读,以上就是“CSS3不透明度发实例介绍”的内容了,经过本文的学习后,相信大家对CSS3不透明度发实例介绍这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是创新互联,小编将为大家推送更多相关知识点的文章,欢迎关注!


    分享标题:CSS3不透明度发实例介绍
    转载注明:http://chengdu.cdxwcx.cn/article/joiccs.html

    其他资讯