Internet Explorer and mainstream browser for CSS style background transparent, font opaque processing method

Just learned the CSS compatibility problem, the compatibility issue is our front-end developers have to cross the gap, for different browsers, we have to consider its compatibility, code operability, because the same piece of code may be in the Google and Firefox and other mainstream browser display is normal, but in Internet Explorer is displayed very strange , especially with IE6 as the main object of care.

Other not to say, here as the title is written, I mainly solve the CSS to achieve transparent background and text opaque method, tested, their own code in IE and non-IE browser can display normal, there is code deficiencies, let everyone correct, everyone's efforts to create our web front-end tomorrow.

In the non-IE browser to achieve the background and font with the transparent method is: opacity:0.1 (where the value of 0-1 , the greater the value, the more opaque)

For non- IE Browser to achieve transparent background, font opacity method:

(where the value is between 0-1 , the greater the value, the more opaque)

Implement background and font transparency under IE browsing to invoke the IE filter command:

(color pickup,\9 representative can only IE6,7,8 recognition)
Filter:alpha (OPACITY=20);

(where the value is between 0-100 , the greater the value, the more opaque)

To make the background transparent font opaque under IE, you need to add relative positioning under the current sub-element:

position:relative;

Here's an example:

CSS code:<style>
*{padding:0; margin:0;}
body{padding:50px; }
#d1 {margin:0 auto; width:300px; height:300px;

/* Background transparent, font opaque */
Background-color: #ffffff; /* Implement background and child element fonts are transparent */
opacity:0.1;
/* Support IE6, 7, 8*/
Background-color: #ffffff \9;
Filter:alpha (OPACITY=20); }

p{color:red; font-size:50px text-align:center;
position:relative; /*//sets the child element as relative positioning, allowing the child element to not inherit the alpha value </style>} */

HTML code:<div id= "D1" >
<p> background Transparency <br> text opacity </p>
</div>

As above is all the code, I think as long as the intentions, I believe that we can read it ' (*∩_∩*)

Internet Explorer and mainstream browser for CSS style background transparent, font opaque processing method