Home > Article > Web Front-end > How to set transparency in css without affecting child elements

How to set transparency in css without affecting child elements

王林forward: 2020-08-11 16:56:303227browse

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>

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);

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>

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!

Statement：

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

Previous article：What is the way to set css style in html elementNext article：What is the way to set css style in html element

See more

How to set transparency in css without affecting child elements

Related articles