Instructions for use: IE browser-specific, a lot of questions, this article to set background transparency for example, as follows:
<!DOCTYPE html><Html><Head><MetaCharSet= "Utf-8"><Title>opacity</Title><Style>*{Padding:0;Margin:0;}Body{Padding:50px;Background:URL (img/bg.png) 0 0 Repeat;}. demo{Padding:25px;Background:#000000;Filter:Alpha (OPACITY=50);/*Supports only IE6, 7, 8, 9*/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 relative positioning, so that child elements do not inherit the alpha value, ensuring that the font color is opaque*/ </style></head>< Span style= "color: #0000ff;" ><body> << Span style= "color: #800000;" >div class= "demo" > <p> background transparent, text opaque Span style= "color: #0000ff;" ></p></< Span style= "color: #800000;" >div> Fully-compatible solution
Above 3 point analysis, the setting of transparent background text opaque, can be used by the properties of Rgba and IE exclusive filter filter:alpha, the compatibility as shown:
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 ...
So how do you use Fiter:alpha for IE6, 7, and 8? 2 years ago wrote "CSS Hack finishing" a article, the latest I also made a point update, there is IE related hack, find only support IE 6, 7, 8 of the scheme, as follows:
/**/@media \0screen\,screen\9 {...} OK, all the problems are solved, all the code is as follows:
<!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> Span style= "color: #0000ff;" ><div class= "Demo" > <p> background transparent, text opaque </p ></div></html>
How to achieve transparent background, text opaque, 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
