CSS for background transparency and text opaque methods

This article describes the CSS implementation of background transparency and text opaque methods

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, is abolished in IE10 version  
 
 
    
 
  in IE6, 7 , you need to activate IE's Haslayout attribute (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 element 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>