css怎样设定透亮度不会影响子元素-百分百源码网

css怎样设定透亮度不会影响子元素

发布时间：09/01 来源：未知浏览：关键词：

通过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怎样设定透亮度不会影响子元素的具体内容，更多请关注百分百源码网其它相关文章！

打赏