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

    css如何设置透明度不会影响子元素

    VV2020-08-11 16:56:30转载675

    通过RGBA设置透明度,只有最新的浏览器支持,支持IE9+,可通过RGBA的alpha通道的方式设定。

    (推荐教程:CSS教程

    <body>
    <div style="background-color:rgba(0,255,0,0.2);"> 
    显示文字 
    </div> 
    </body>

    前三个值是rgb的颜色值,最后一个透明度的值,取值为0~1,值越小越透明。

    兼容所有浏览器写法:

    background-color:rgba(0,0,0,0.25);
    filter:progid:DXImageTransform.Microsoft.Gradient(startColorstr=#40000000,endColorstr=#40000000);

    注意:startColorStr 和 endColorStr 的值,前两位是十六进制的透明度,后面六位是十六进制的颜色。

    其格式为 #AARRGGBB 。 AA 、 RR 、 GG 、 BB 为十六进制正整数。取值范围为 00 - FF 。

    RR 指定红色值, GG 指定绿色值, BB 指定蓝色值,参阅 #RRGGBB 颜色单位。 AA 指定透明度。 00 是完全透明。 FF 是完全不透明。超出取值范围的值将被恢复为默认值。

    (视频教程推荐:css视频教程

    2位透明度的换算方法:x=alpha*255 ,将计算的结果 x 转换成十六进制即可。

    js换算16进制方法: x.toString(16)

    例如:上面的 0.25 透明度,换算为IE的AA透明度: var a = 0.25 * 255 = 63.75 ~= 64; a.toString(16) = 40

    举例:

    <!DOCTYPE html>
    <head>
    <meta charset="utf-8"/>
    <style type="text/css">
    body{margin:0;padding:0;}
    .div_content{
        background: url("1.gif") no-repeat;
        /*给input框添加背景图片,以凸显其透明效果。*/
        width: 200px;
        height: 200px;
    }
    .div_content>input{
        outline: none;
        border: none;
        background-color: transparent;
        /*必须将背景色设为透明,否则无效。(除非对于要设置的元素本身已经是透明的,如:span元素等)*/
        background-color: rgba(0,0,0,0.25);
        filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr=#40000000,endColorstr=#40000000);
    }
    </style>
    </head>
    <body>
        <div  class="div_content">
            <input type="text" size="20"/>
        </div>
    </body>
    
    </html>

    以上就是css如何设置透明度不会影响子元素的详细内容,更多请关注php中文网其它相关文章!

    声明:本文转载于:csdn,如有侵犯,请联系admin@php.cn删除
    专题推荐:css 透明度 子元素
    上一篇:在html元素中设置css样式的方式是什么 下一篇:css怎样实现DIV高度自适应
    线上培训班

    相关文章推荐

    • CSS的子元素选择器用法详细介绍• css判断子元素个数• 如何使用css属性nth-child(n)匹配选择第n个子元素• css如何设置透明度不影响子元素?兼容所有浏览器写法

    全部评论我要评论

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

    PHP中文网