Rgba compatibility processing and rgba compatibility

Source: Internet
Author: User

Rgba compatibility processing and rgba compatibility

According to caniuse (http://caniuse.com/#search=rgba), rgba compatibility is IE9 and above.

 

Instance code:

1 <! Doctype html> 2 

Chrome browser effect:

 

IE8 browser effect (no background ):

Rgba compatibility processing:
1. parent {2 width: 400px; 3 height: 400px; 4 margin: 100px; 5 font-size: 20px; 6 color: # FF0000; 7 border: 1px solid red; 8 background: rgba (0, 0, 0, 0.5); 9/* next key setting */10 filter: progid: DXImageTransform. microsoft. gradient (startcolorstr = #7f000000, endcolorstr = #7f000000); 11}

Set the filter attribute to execute when the transparency of the last row does not work. filter: progid: DXImageTransform. microsoft. gradient is used for gradient, but this place does not need gradient, so both colors are set to the same color.

The color "#7f000000" is composed of two parts.

The first part is the 7f behind. Is the IEfilter value of rgba transparency 0.5. Each number from 0.1 to 0.9 corresponds to an IEfilter value. The relationship is as follows:

That is, the value obtained from alpha * 255 can be converted to hexadecimal.

The second part is the six-digit color value after 7f, which is the same as the value in the rgb function. For example, the value corresponding to # ffffff in rgb (255,255,255.

 

Conclusion: This completes IE8 and later iebrowser RGBA compatibility.

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.