Problems and solutions encountered when using rgba() in css

Today I encountered a problem, I want to set a translucent white div in a page. This doesn't seem to be a problem. You just need to set the following attributes for this div:

background: rgba(255,255,255,.1);

But it must be compatible with ie8. This is a bit painful. Because ie8 does not support the rgba() function. Below we summarize the meaning of the rgba() function.

The meaning of rgba, r represents red, g represents green, b represents 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. RGB is supported in modern browsers. However, rgba is not supported in antique browsers such as IE8. IE8 can only barely support the rgb() function (that is, transparency is removed and can only represent color).

So setting translucency in IE8 requires some brainpower. I learned from a master that you can use IE's filter to solve this problem. The css code is as follows:

background: rgba(255,255,255,.1);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#19ffffff,endColorstr=#19ffffff);

The second sentence means that it will be executed when the transparency of the previous line does not work. . The meaning of this sentence was originally used to make gradients. But no gradient is needed here. So both colors are set to the same color.

Please note that this color "#19ffffff" is composed of two parts.

The first part is 19 after #. 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 a hexadecimal color value. It must be the same as the value in the rgb function. For example, rgb(255,255,255) corresponds to #ffffff; both are white.

At this point, the usage of rgba is compatible with IE8.

The above is the detailed content of Problems and solutions encountered when using rgba() in css. For more information, please follow other related articles on the PHP Chinese website!