How to set transparency in css without affecting child elements-CSS Tutorial-php.cn

How to set transparency in css without affecting child elements

王林

Release： 2020-08-11 16:56:30

forward

3265 people have browsed it

How to set transparency in css without affecting child elements

Setting transparency through RGBA is only supported by the latest browsers, supports IE9, and can be set through the alpha channel of RGBA.

(Recommended tutorial: CSS tutorial)

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

Copy after login

The first three values are the rgb color values, and the last transparency value is 0~1. The smaller it is, the more transparent it is.

Compatible with all browsers Writing method:

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

Copy after login

Note: The first two digits of the values of startColorStr and endColorStr are hexadecimal transparency, and the last six digits are hexadecimal color.

The format is #AARRGGBB. AA, RR, GG and BB are hexadecimal positive integers. The value range is 00 - FF.

RR specifies the red value, GG specifies the green value, BB specifies the blue value, see #RRGGBB color unit. AA specifies transparency. 00 is completely transparent. FF is completely opaque. Values outside the value range will be restored to the default value.

(Recommended video tutorial: css video tutorial)

2-digit transparency conversion method: x=alpha*255, convert the calculated result x into hexadecimal Just make it.

JS conversion method for hexadecimal: ; a.toString(16) = 40

Example:

<!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>

Copy after login

The above is the detailed content of How to set transparency in css without affecting child elements. For more information, please follow other related articles on the PHP Chinese website!