To set a translucent white div in a page. This does not seem to be a problem, just set the following properties to this div:
background: rgba(255,255,255,0.1);
But to be compatible to ie8. This is kind of a pain in the ass. Because ie8 does not support the rgba() function. Below we summarize the meaning of the rgba() function.
The meaning of rgba, r stands for red, g stands for green, b stands for blue, red, green and blue are the three primary colors. All colors can be combined from these three colors. a stands for transparency. For example, rgba(255, 255, 255, 0.1) is white with a transparency of 0.1. rgba is supported in modern browsers. However, rgba is not supported in antique browsers such as ie8, and ie8 can only barely support the rgb() function (that is, the transparency is removed, and only the color can be represented).
So setting translucency in ie8 takes a bit of a brain. I learned from the great god that you can use ie's filter to solve this problem. The css code is as follows:
background: rgba(255,255,255,0.1);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#19ffffff,endColorstr=#19ffffff);
The meaning of the second sentence is to execute when the transparency of the previous line does not work. The meaning of this sentence was originally used to make gradients. But this place doesn't need gradients. So both colors are set to the same color.
Note that this color "#19ffffff" is composed of two parts.
The first is the 19 after the # sign . is the IEfilter value of rgba transparency 0.1. Each number from 0.1 to 0.9 corresponds to an IEfilter value. The corresponding relationship is as follows:
The second part is the six digits after 19 . This is the color value in hexadecimal. It should be the same as the value in the rgb function. For example, rgb(255,255,255) corresponds to #ffffff; all are white.
At this point, the usage of rgba can be compatible with IE8.