Home > Article > Web Front-end > How to set transparency in css without affecting child elements? Compatible with all browser writing methods

How to set transparency in css without affecting child elements? Compatible with all browser writing methods

云罗郡主forward: 2018-10-18 15:58:223498browse

The content this article brings to you is about it and has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

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

Set transparency through RGBA, only the latest browsers support it, support IE9, and can be set through the alpha channel of RGBA.
The first three values are the RGB color values, and the last transparency value ranges from 0 to 1. The smaller the value, 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）；

Note: The first two digits of the values of startColorStr and endColorStr are hexadecimal transparency, and the last six digits are hexadecimal. Base 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, and BB specifies the blue value, see #RRGGBB color units. AA specifies transparency. 00 is completely transparent. FF is completely opaque. Values outside the value range will be restored to the default value.

Conversion method for 2-digit transparency: x=alpha*255, just convert the calculated result x into hexadecimal.

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

Example: Setting transparency for input does not affect child elements (compatible with IE8)

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

The above is the complete introduction, if you want to know more For

CSS video tutorial, please pay attention to the PHP Chinese website.

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

Statement：

This article is reproduced at:csdn.net. If there is any infringement, please contact admin@php.cn delete

Previous article：Explanation on the usage of clip-path attribute in css (with code)Next article：Explanation on the usage of clip-path attribute in css (with code)

See more

How to set transparency in css without affecting child elements? Compatible with all browser writing methods

Compatible with all browsers Writing method:

The above is the complete introduction, if you want to know more For

Related articles