• 技术文章 >web前端 >css教程

    实现CSS3不透明度完整代码

    高洛峰高洛峰2017-03-20 10:45:28原创1587
    如何设置透明度?定义opacity属性,通过设置该属性能够使任何元素呈现出半透明效果,opacity属性的基本语法如下:

    <alphavalue>|inherit

    取值说明:

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

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

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

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

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
    <html xmlns="http://www.w3.org/1999/xhtml">  
    <head>  
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
    <title>opacity</title>  
    <style type="text/css">  
    body {   
        margin:0;   
        padding:0;   
    }   
    p { position:absolute; }   
    .bg {   
        width:100%;   
        height:100%;   
        background:#000;   
        opacity:0.7;   
        filter:alpha(opacity=70);   
    }   
    .lightbox {   
        left:50px;   
        top:50px;   
    }   
    </style>  
    </head>  
      
    <body>  
    <p class="web"><img src="images/web_bg_9.jpg" width="1259" height="630" /></p>  
    <p class="bg"></p>  
    <p class="lightbox"><img src="images/web_bg_10.png" width="80%" /></p>  
    </body>

    演示效果图:

    2016426151544565.jpg

    相关文章:

    CSS设定一个元素半透明

    CSS3教程(8):CSS3透明度指南

    CSS3中使用RGBa来调节透明度的示例说明

    以上就是实现CSS3不透明度完整代码的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:CSS3 透明度
    上一篇:详解CSS3 RGBA色彩模式使用实例代码 下一篇:利用CSS中linear制作复杂的边框效果实例分析

    相关文章推荐

    • 怎么用css样式把图片改为灰色• css怎么降低背景透明度• css3如何让animation动画停止• 手把手教你CSS架构之SMACSS• css怎么实现图片放大缩小动画

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网