Background translucent processing under IE (filter)

Now do the site home page, navigation bar, such as the use of translucent effect, debugging when I used the Chrome browser, before having considered the compatibility of IE, but intended that the full layout of the page after the completion of a one-time solution. Because it only requires compatibility to IE8, it doesn't feel too big a problem.
But when I entered the commissioning phase, I completely "crashed" ie is a synonym for the anti-human, but the problem still needs to be solved.

First of all, under normal circumstances, in a high version of the browser, the background of a box to use translucent effect, we only do this:



Body {
Background:url (.. /images/background.jpg) No-repeat;
}

. box {
Background:rgba (0, 0, 0, 0.5);
}



IE9 above the IE browser, and most of the other high version of the browser is to support the "Rgba", so as scheduled on top of the background picture will appear a layer of translucent blanket.
When using a lower version of IE view, the translucent effect is no longer present. (It is expected that there should be a large black, when the actual situation is the background color completely disappeared.) Because previously in the "Html&css Design and Build Web Site" (Jon Duckett) explained to the "Rgba" attribute, when the browser is not recognized as "RGB" so, should be as "RGB (0, 0, 0)" Handled, should be a piece of black. No expected effect, it should be the browser directly ignore this element, so when writing CSS styles will be RGB (0, 0, 0) before the "Rgba" element, when the browser can not recognize the elements behind the previous effect. ）

The IE filter is used to handle:



Body {
Background:url (.. /images/background.jpg) No-repeat;
}

. box {
Background:rgb (0, 0, 0);
Background:rgba (0, 0, 0, 0.5);
Filter:alpha (OPACITY=50);
opacity:0.50;
}



The effect didn't come out, and then I looked at the article and learned that when using filters to handle transparent (opacity) effects, you had to set the height of the box.
Modified as follows:



Body {
Background:url (.. /images/background.jpg) No-repeat;
}

. box {
width:1024px;
height:1024px;
Background:rgb (0, 0, 0);
Background:rgba (0, 0, 0, 0.5);
Filter:alpha (OPACITY=50);
opacity:0.50;
}




There is a table about Filter:alpha (), opacity, etc. that can explain something:

IE uses ' Filter:alpha (opacity=50); ' The alpha channel filter of the filter makes the element translucent, but the element must trigger the Haslayout attribute.
Non-IE browsers use ' opacity:0.5 ' in this draft CSS3 ' opacity ' feature to make elements translucent.
So at the same time use ' Filter:alpha (opacity=50); ' opacity:0.5; You can make sure that the translucent effect is present in all browsers.


As scheduled, got the effect I wanted.
But it should not stop there, as mentioned earlier, in order to get a background on an unrecognized browser, the "RBG" element was used before, but sometimes there are some unexpected results. In addition, such processing when the style up to a certain degree, often need to write a separate style for IE, used to not get too much convenience.
When you look up a workaround, you also learn about a method that you can use to handle with the DXImageTransform.Microsoft.gradient filter. This can be simpler when only a small part of the transparency issue is needed (personal opinion, though written more).

The code is as follows:



Body {
Background:url (.. /images/background.jpg) No-repeat;
}

. box {
width:1024px;
height:1024px;
Filter:progid:DXImageTransform.Microsoft.gradient (startcolorstr= ' #99000000 ', endcolorstr= ' #99000000 ');
* IE6,IE7 * *
-ms-filter: "Progid:DXImageTransform.Microsoft.gradient (startcolorstr= #99000000, endcolorstr= #99000000)";
* IE8 * *
Background:rgba (0, 0, 0, 0.5);
}



For the use of the FILTER:progid:DXImageTransform.Microsoft.Gradient filter, query to Related:
“
Grammar:
Filter:progid:DXImageTransform.Microsoft.Gradient (Enabled=benabled,startcolorstr=iwidth,endcolorstr=iwidth)
Property:
Enabled: Options available. A Boolean value (Boolean). Sets or retrieves whether the filter is active. True False
true: Default value. Filter activation.
False: Filters are prohibited.

STARTCOLORSTR: Options available. String. Sets or retrieves the start color and transparency of a color gradient.
The format is #AARRGGBB. AA, RR, GG, BB are 16 positive integers. The value range is 00-ff. RR specifies a red value, GG specifies a green value, BB specifies a blue value, see #RRGGBB color unit. AA specifies transparency. 00 is completely transparent. FF is completely opaque. Values that exceed the range of values are restored to their default values.
The value range is #FF000000-#FFFFFFFF. The default value is #FF0000FF. Opaque Blue.
ENDCOLORSTR: Options available. String. Sets or retrieves the end color and transparency of a color gradient. See StartColorStr properties. The default value is #FF000000. Opaque black.
Characteristics:
Enabled: can read and write. A Boolean value (Boolean). See the Enabled property.
GradientType: can read and write. Integer value (integer). Sets or retrieves the direction of a color gradient. 1 0
1: Default value. Horizontal gradient.
0: Vertical gradient.
STARTCOLORSTR: can read and write. String. See StartColorStr properties.
StartColor: can read and write. Integer value (integer). Sets or retrieves the start color of a color gradient. The value range is 0-4294967295. 0 is transparent. 4294967295 is opaque white.
ENDCOLORSTR: can read and write. String. Sets or retrieves the end color and transparency of a color gradient. See StartColorStr properties. The default value is #FF000000. Opaque black.
EndColor: can read and write. Integer value (integer). Sets or retrieves the end color of a color gradient. The value range is 0-4294967295. 0 is transparent. 4294967295 is opaque white. When you use this attribute in a script, you can also use hexadecimal format: 0xAARRGGBB.
Description
Displays a custom color layer between the object's background and content.
When this effect is displayed by a transition, the textual initialization of the text above the color layer of the gradient book is transparent, and when the color gradient is implemented, the text color is updated with its defined value.
”
The basic use is: "We want to set the start color (STARTCOLORSTR) and the end color (endcolorstr) for it." In the case of monochrome transparency, the two values are the same. Their value is a eight-bit hexadecimal value, the first two digits represent an alpha channel value, 00 is fully transparent, the FF is completely opaque, and the last six digits are the RGB value of the color. ”