CSS sets an element to be transparent by RGBA

Rgba is a way to declare a color in a CSS that contains a transparent effect, and its syntax is this:

The

code is as follows:


Div {


Background:rgba (200, 54, 54, 0.5);


}

It allows us to add a transparent color to the element. Maybe we're used to "opacity", which is easy to use, but opacity makes all the child elements transparent, and it's hard to solve the problem. (Unless you use weird positioning hack) It's also tricky to be transparent across browsers.

With Rgba, we can set an element to be transparent without affecting its child elements:



Declare a reserved color

Not all browsers support RGBA, so you can declare a reserved color if you allow it. This color should be reliable-all browsers support it. Not declaring means that no color is used in browsers that do not support RGBA.

The

code is as follows:


Div {


Background:rgb (200, 54, 54); * * The fallback * *


Background:rgba (200, 54, 54, 0.5);


}</code>

However, this retreat is still not valid in some antique-level browsers.

Browser support for RGBA



The above data is obtained by testing the demo, which contains a more complete list of browser compatibility.
A better retreat for IE browsers

Because IE browsers support conditional annotations, we can discard RGB and use IE's private CSS filter to achieve the same effect:

The
code is as follows:


<!--[if ie]>


<style type= "Text/css" >


. Color-block {


background:transparent;


filter:progid:DXImageTransform.Microsoft.gradient (startcolorstr= #99000050, endcolorstr= #99000050);


zoom:1;


}


</style>


<! [endif]-->