Compatible with rgba in IE8 and rgba in IE8

Compatible with rgba in IE8 and rgba in IE8

When I was working on a project a few days ago, I encountered a problem about transparency. Today I am blank to tell you some of my views and how to be compatible with transparency.

I. Two methods (IE9 +)

1: rgba () (only transparent background)

2: opcity (the content and background are transparent)

Ii. Differences

Before css3, our css colors were all RGB-based and solid colors, but CSS introduced the new concept of opacity and transparency through the alpha color and opacity attributes.

The background color and text color of the above two images are the same. The difference is that we set different transparency methods. The above background color and text are transparent. Only the background color below is transparent.

Iii. Explanations

This example is used to explain opacity and alpha. The two control transparency is a decimal point, from 0 to 1, 0 is completely transparent, 1 is completely opaque

The difference is that the value of the opacity attribute can be inherited by its child elements. For example, we enclose the text in the div in the above figure with the p tag. Although we only Set opacity for the div, the text in our p tag is also transparent.

 

Alpha is actually an Alpha channel, which adds a new value to the previous RGB color model and becomes the RGBA color model. The rgba color model has four values. The last value is the alpha channel value. The value ranges from 0.0 to 1.0.

 

4. compatible with IE8 transparency

Background: rgba (0, 0,. 5 );

However, to be compatible with IE8, it is found that there is no transparent effect, because IE8 does not support the rgba () function.

Next we will summarize the meaning of the rgba () function. The meaning of rgba. r indicates red, g indicates green, B Indicates blue, and a indicates transparency. Red, green, and blue are three primary colors. All colors can be combined by these three colors.

For example, rgba (0.5, 0,. 5) is black with a transparency. Modern browsers support rgba, but they do not support rgba in IE8 and other antique browsers. IE8 can barely support the rgb () function (that is, the transparency is removed and only the color is displayed ).

Background: rgba (0, 0, 0 ,. 5);/* supports rgba browsers */filter: progid: DXImageTransform. microsoft. gradient (startColorstr = #7f000000, endColorstr = #7f000000);/* IE8 support */

The second sentence means that the statement is executed when the transparency of a row does not work. The meaning of this sentence is originally used for gradient, but there is no need for gradient in this place. So both colors are set to the same color.

Six digits. This is a hexadecimal color value. The value must be the same as that in the rgb function. For example, rgb (, 0,) corresponds to #000; are black.

By now, rgba is compatible with IE8.

 

Recently, we have seen that filter is not directly added to the style, but is used to add filter compatibility for ie. Later, we found that IE9 supports both RGBA and filter, resulting in two overlapping and poor transparency. Therefore, we need to change it,

The procedure is as follows:

<!--[if lt IE 9]>   <style type="text/css">   .color-block {       background:transparent;       filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#7f000000,endColorstr=#7f000000);       zoom: 1;    }    </style><![endif]-->