Thanks to @ Lin Xiaozhi's blog, let me know that the IE transition filter + CSS3 rgba can be perfectly implemented.
The specific implementation code is as follows:
The code is as follows: |
Copy code |
. Transparent { Background: rgba (0, 0, 0, 0.3 ); Filter: progid: DXImageTransform. Microsoft. Gradient (GradientType = 0, StartColorStr = '# 4c000000', EndColorStr =' #4c000000 '); } : Root. transparent { Filter: progid: DXImageTransform. Microsoft. Gradient (GradientType = 0, StartColorStr = '#00000000', EndColorStr = '#00000000 '); } |
Tip: IE9 supports the filter and rgba attributes, which will double the background transparency!
Solution: Use the root pseudo class to write HACK separately for IE9 and reduce its transparency to 0.
I. No translucent style instance is set
The code is as follows: |
Copy code |
<! DOCTYPE html> <Html> <Head> <Meta charset = "UTF-8"/> <Title> css background translucent www.111cn.net </title> <Style> . Div-a {background: url(div-a-bg.png) no-repeat; width: 230px; height: 136px; padding: 10px ;} . Div-B {background: #000; width: 200px; height: 100px; padding: 5px; color: # F00} </Style> </Head> <Body> <Div class = "div-a"> <Div class = "div-B"> DIV translucent instance demonstration </div> </Div> </Body> </Html> |
2. Set a CSS translucent style instance for the DIV
Add the translucent style code to the ". div-B" selector: filter: alpha (Opacity = 60);-moz-opacity: 0.6; opacity: 0.6;
The code is as follows: |
Copy code |
<! DOCTYPE html> <Html> <Head> <Meta charset = "UTF-8"/> <Title> css background translucent www.111cn.net </title> <Style> . Div-a {background: url(div-a-bg.png) no-repeat; width: 230px; height: 136px; padding: 10px} . Div-B {background: #000; width: 200px; height: 100px; padding: 5px; color: # F00; Filter: alpha (Opacity = 60);-moz-opacity: 0.6; opacity: 0.6} /* CSS comments: here the CSS code line feed is used to display the complete code here. The CSS effect is not affected after the line feed */ </Style> </Head> <Body> <Div class = "div-a"> <Div class = "div-B"> demonstration of DIV translucent instances </div> </Div> </Body> </Html> |
Note:
1. filter: sets the translucent filter effect for win ie. filter: alpha (Opacity = 80) indicates that the object is 80% translucent, which is not recognized by Firefox.
2.-moz-opacity: translucent to mozilla firefoxfirefox. win IE does not recognize this attribute.-moz-opacity: 0.5 is equivalent to setting translucent to 50%.
3. opacity: supports all browsers except Internet Explorer, including Google, and finally focuses on Google browsers. opacity: 0.5 indicates that the browser is 50% translucent.
To observe the DIV translucent implementation, we set two DIV layers, one placed in the other DIV layer, and the outer DIV is named ". div-a "; the CSS class of the contained layer is named". div-B "to form". div-B "box placed in". inside div-
We set a background image for the underlying DIV, and the DIV box above sets the village black.