CSS for transparent background, text opaque, compatible with all browsers

So what, Stay up late and do 11.11 of the activity, on the PC side encountered a transparent background and transparent pictures of the problem, in fact, have encountered before, but did not summarize up, forget, this time and hit the wall, it must be recorded, one to make a small summary, mention a wake up, recently become lazy, no effort will hang upside down, and second, because there is no complete solution on the network Case, hope can help to meet this kind of problem friend, today mainly explain the background transparent solution, mutual encouragement ~

Key Content Entry:

• IE6 and some IE7 kernel browsers will read Rgba
• Compatible processing of IE exclusive filter filter:alpha
• Transparent background, text opaque full compatibility scheme

To test your browser:

VirtIE6, virtual machine under XP IE6, pure IE8, pure IE8 under the QQ browser, WIN7 under the IE 9.0.32, WIN8 under the IE 10.0.21, Chrome 38.0, QQ browser 8.0-ie10.0.5, Safari 5.1.7, Opera 25.0

How to achieve transparent background, text opaque, compatible with all browsers?

What we usually say about adjusting transparency, in fact, is to adjust the opacity in the style, as in the example:

Open PS, on the layers panel, you can see a menu that sets the opacity of the layer, from 0% (fully transparent) to 100% (completely opaque).

There are 3 ways to implement a transparent CSS method, and the following is a 80% notation for opacity

• The value of CSS3 's opacity:x,x is from 0 to 1, such as opacity:0.8
• CSS3 Rgba (red, green, blue, alpha), alpha values from 0 to 1, such as Rgba (255,255,255,0.8)
• IE exclusive filter filter:alpha (OPACITY=X), x value from 0 to 100, such as Filter:alpha (OPACITY=80)

CSS3 's Opacity

Compatibility: IE6, 7, 8 not supported, IE9 and above and standard browser support

Instruction for use: Set all descendant elements of the opacity element to be transparent with each other, generally used to adjust the overall opacity of the picture or module

<! DOCTYPE html>
After using opacity, the entire module is transparent, showing the following:
Then using opacity to achieve the "background transparent, text opaque" is not available .
CSS3 's Rgba
Compatibility: IE6, 7, 8 not supported, IE9 and above and standard browser support
Instructions for use: Set the opacity of the color, which is generally used to adjust the opacity of background-color, color, Box-shadow, and so on.
<! ><TITLE>CSS3 of DOCTYPE Html>
Use RGBA in Background-color, standard browser, background transparent, text opaque, show as follows:
Very wonderful is, IE6 and part of the IE7 kernel browser (such as QQ browser) will read Rgba, after parsing the color is transparent, in fact, it should be null
It is advisable to use opacity for background transparency and text opacity.
IE exclusive filter filter:alpha (OPACITY=X)
Instructions for use: IE browser-specific, a lot of questions, this article to set background transparency for example, as follows:

 
  

  
   
 
    
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
 
   
 
  
<! DOCTYPE html>
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:
/* only supports IE6, 7, 8 */@media \0screen\,screen\9 {...}
OK, all the problems are solved, all the code is as follows:
<! DOCTYPE html>
Download Demo
Many students may feel very complex, why not directly with two div placed in the same position on the line, an opaque div, a text div, very simple problem solving, this is also a good way, but need to write absolute positioning or negative margin, and appear empty content div, And this is this method in some scenarios will also appear complex, the following example, the mouse after the trademark display transparent presentation of the text, you need to control 2 div ~
CSS for transparent background, text opaque, compatible with all browsers