Allow Internet Explorer to support rgba color

Source: Internet
Author: User

RGB color mode (also translated as "Red, green, and blue", which is rarely used) is a color standard in the industry) the changes of the three color channels and their overlapping to obtain a variety of colors, RGB represents the colors of the red, green, and blue channels, this standard covers almost all colors that human vision can perceive and is one of the most widely used color systems.

Rgba adds a parameter to control Alpha transparency based on RGB. The preceding three parameters are R, G, and B. The value range of a positive integer is 0-255. The value range of the percentage value is 0.0%-100.0%. A value out of the range will be used as of its nearest value limit. Not all browsers support percentage values. Parameter A, with a value ranging from 0 ~ Between 1, cannot be negative

Rgba Syntax:

 
Div {Background: rgba (0, 0, 0, 0.5 );}

Browser compatibility:

Type Internet Explorer Firefox Chrome Opera Safari
Version (×) IE6 (√) Firefox 3.0.10 (√) Chrome 2.0.x (√) Operators' 9.64 (√) Safari 4
(×) IE7        
(×) IE8        
(√) Ie9        

Differences between rgba and opacity
Opacity will make the entire element including sub-elements transparent, while rgba is only transparent to elements and sub-elements are not transparent.

The following describes how to enable Internet Explorer to support rgba color.
I. csspie
Csspie allows color, background,
Box-shadow supports rgba
Example:

Div{Color:Rgba (0, 0,. 5);Background:Rgba (0, 0,. 5);-Pie-Background:Rgba (0, 0,. 5);/*IE6-8*/Box-shadow:1px 1px rgba (0, 0,. 5);/*Supports rgba only when fuzzy values are not set.*/}

Ii. Filter
Use the IE filter to make the background color transparent and simulate the rgba effect.
Example:

. Filter{Filter:Progid: DXImageTransform. Microsoft. gradient (startcolorstr = # bf000000, endcolorstr = # bf000000);}

We need to pay attention to the values of startcolorstr and endcolorstr. The first two are hexadecimal transparency, and the last six are hexadecimal colors.
Conversion Method: x = Alpha * 255
Convert the calculated result X to the hexadecimal format.

 
Background: rgba (50, 95,224 ,. 4); filter: progid: DXImageTransform. microsoft. gradient (gradienttype = 0, startcolorstr = '#886287a7', endcolorstr = '#886287a7 ');

DXImageTransform. microsoft. the value of startcolorstr in the gradient filter is in the format of # aarrggbb. AA indicates the hexadecimal format of opacity, 00 indicates completely transparent, and FF indicates completely transparent, the decimal range is 0 ~ 255. The remaining rrggbb is the hexadecimal color.Code. In the example, Background: rgba (125, 0, 0,. 3); indicates a red background with a 30% opacity. How can we convert the opacity of 30% to hexadecimal notation? It is very simple. Calculate the # Aa decimal X, X/255 = 3/10, and obtain x = 3*255/10. then convert X to hexadecimal format, which is about 4B.

 

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.