Implementing a transparent CSS approach
There are usually 3 ways to do this, and the following is a 80% notation for opacity
1.CSS3 opacity:x, x value from 0 to 1, such as opacity:0.8
Setting all descendant elements of the opacity element is transparent with each other, and is generally used to adjust the overall opacity of the picture or module.
2.CSS3 Rgba (red, green, blue, alpha), alpha values from 0 to 1, such as RGBA (255,255,255,0.8)
Sets the opacity of the color, which is generally used to adjust the opacity of background-color, color, Box-shadow, and so on.
Use RGBA in Background-color, standard browser, background transparent, text opaque,
But IE6 and some IE7 kernel browser (such as QQ browser) will read Rgba, after parsing the color is transparent, in fact, it should be null
3.IE exclusive filter filter:alpha (opacity=x), x value from 0 to 100, such as Filter:alpha (OPACITY=80)
IE browser-specific, a lot of questions:
only supports IE6, 7, 8, 9, and is abolished in the IE10 version
in IE6, 7, you need to activate the haslayout attribute of IE (for example: *zoom:1 or *overflow:hidden) and let it read Filter:alpha
in IE6, 7, 8, the Filter:alpha element is set, the parent element is set Position:static (the default property), and its child elements are relative positioning, which makes the child elements opaque
Implement a fully compatible approach
Set Transparent background text opaque, can use the properties of Rgba and IE's exclusive filter filter:alpha,
For IE6, 7, 8 browsers, we can use Fiter:alpha, for standard browsers we use RGBA, then the problem, IE9 browser 2 properties are supported, together with the use will repeatedly reduce the opacity ( this test in the IE9 does not seem to change ）
Let the filter only support IE6, 7, 8 methods: @media \0screen\,screen\9 {...}
Full Demo
<!DOCTYPE HTML><HTML><Head> <MetaCharSet= "Utf-8"> <title>Transparent background, opaque text</title> <style> *{padding:0;margin:0; }Body{padding:50px;background:URL (img/bg.png) 0 0 Repeat; }. Demo{padding:25px;Background-color:Rgba (0,0,0,0.3);/*browsers such as IE9, standard browsers, IE6, and some IE7 kernels, such as the QQ browser, will read*/Background-color:#000000;Filter:Alpha (opacity=30);position:Static; /*IE6, 7, 8 can only be set Position:static (default property), otherwise it will cause child elements to inherit the alpha value*/*zoom:1; /*activates IE6, 7 's Haslayout property, and lets it read Alpha*/ }. Demo P{Color:#FFFFFF;position:relative;/*set child elements to be relative positioning, allowing child elements to not inherit alpha values*/ } </style></Head><Body> <Divclass= "Demo"> <P>Transparent background, opaque text</P> </Div></Body></HTML>
If you are concerned about IE9 transparency changes, you can look at the following demo:
<!DOCTYPE HTML><HTML><Head><MetaCharSet= "Utf-8"><title>Transparent background, opaque text</title><style>*{padding:0;margin:0;}Body{padding:50px;background:URL (img/bg.png) 0 0 Repeat;}. Demo{padding:25px;Background-color:Rgba (0,0,0,0.5);/*browsers such as IE9, standard browsers, IE6, and some IE7 kernels, such as the QQ browser, will read*/}. Demo P{Color:#FFFFFF;}@media \0screen\,screen\9{/*supports only IE6, 7, 8*/. demo{Background-color:#000000;Filter:Alpha (opacity=50);position:Static; /*IE6, 7, 8 can only be set Position:static (default property), otherwise it will cause child elements to inherit the alpha value*/*zoom:1; /*activates IE6, 7 's Haslayout property, and lets it read Alpha*/ }. Demo P{position:relative;/*set child elements to be relative positioning, allowing child elements to not inherit alpha values*/ } }</style></Head><Body> <Divclass= "Demo"> <P>Transparent background, opaque text</P></Div></HTML>
Above reference http://www.cnblogs.com/PeunZhang/p/4089894.html
Transparent background but text opaque implementation method (compatible with all browsers)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
