rgba for background color of IE7&IE8

web front end eleven thousand and twenty 12 years ago (2012-06-11)

RGB color mode (also translated as "red, green and blue", which is rarely used) is a color standard in the industry. It obtains various colors through the changes of red (R), green (G) and blue (B) color channels and their superposition. RGB is the color representing 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 at present.

RGBA controls alpha more than RGB transparent The parameter of degrees. For the above three parameters R, G and B, the value range of positive integer value is 0– 255。 Value range of percentage value: 0.0%– 100.0%。 The value out of range will be up to its nearest value limit. Not all browser Both support the use of percentage values. Parameter A, value between 0 and 1, cannot be negative

RGBA syntax:

  1. div {

  2. background : rgba ( zero , zero , zero , zero point five );

  3. }

Browser compatible Sex:

Differences between RGBA and efficiency
Opacity (filter: Alpha (Opacity=50) or Opacity: 0.5) will make the entire element including child elements transparent, while RGBA is just the element itself transparent, and child elements opaque.

The following details how to make IE browser support RGBA color
1、 CSSPIE
CSSPIE enables color, background and box shadow to support RGBA
Example:

  1. div {

  2. color : rgba ( zero , zero , zero ,. five );

  3. background : rgba ( zero , zero , zero ,. five );

  4. - pie - background : rgba ( zero , zero , zero ,. five ); /* IE6 -8*/

  5. box - shadow : 1px 1px rgba ( zero , zero , zero ,. five ); /*Support rgba only when no ambiguity value is set*/

  6. }

2、 Filter
Make the background color transparent through IE filter to simulate the rgba effect without affecting the background transparency of sub elements
Example:

  1. . filter {

  2. filter : progid : DXImageTransform . Microsoft . gradient ( startColorstr = #BF000000,endColorstr=#BF000000);

  3. }

We need to pay attention to the values of StartColorStr and EndColorStr. The first two digits are hexadecimal transparency, and the last six digits are hexadecimal colors.
Conversion method: x=alpha * 255, convert the calculated result x into hexadecimal

1. Load PIE.js on your web page.
Note: Use IE specific comments to prevent non IE browsers from downloading.
<!-- [if lt IE 10]>
<script type="text/javascript" src="PIE.js"></script>
<! [endif]-->
 
2. Call with js:
$(function() {
    if (window.PIE) {
        $('.rounded').each(function() {
            PIE.attach(this);
        });
    }
});