CSS Transparent background Incompatible solution detailed

CSS transparency is a technical activity because it involves IE8 and the following versions of incompatible opacity this CSS3 attribute, while Filter:alpha (opacity=80) is incompatible IE6. The more popular transparent CSS on the Internet is written like this.

The code is as follows	Copy Code
. transparent_class { /* IE 5-7 * * Filter:alpha (OPACITY=50); * Netscape * * -moz-opacity:0.5; * Safari 1.x * * -khtml-opacity:0.5; * * Good browsers * * opacity:0.5; }

Here we use a whole layer of transparency, and when you use the above code, the text and pictures will become transparent, but sometimes we need the knowledge background color transparent, or background image of a transparent.

1. Transparent background picture

is a compatibility issue again, IE8 and the following does not support RGBA (RGBA color value is an extension of the RGB color value, with an alpha channel – it sets the object's opacity. , the following code is a popular online writing, support IE series browser, but the experience of the predecessors is less use OH.

The code is as follows	Copy Code
. hex_color { Filter:progid:DXImageTransform.Microsoft.gradient (enabled= ' true ', startcolorstr= ' #7FFF0000 ', endcolorstr= ' * 7fff0000 '); } : Root. hex_color { Filter:none; /* Handle the filter effect in IE9 browser * * Background:rgba (255,0,0,0.5); }

2. Transparent background picture

We all know that the IE6 background image will have the default shadow, there are several ways to solve this problem

A. Use Jsdd_belatedpng to achieve, say Taobao Tencent these all do not use these plug-ins, perhaps they are through CSS to solve the bar

B. Save the picture in PNG8 format, we all know that there will be some shadow and sawtooth effects when PNG8 is saved. Today in an article see can use firework to export PNG8.

The original text mentions:

In fireworks, be sure to use the export alpha-transparent PNG8 instead of the alpha-transparent PNG8.
Steps:

The code is as follows	Copy Code
Fireworks >> Files >> Export Wizard

Then the next step down will be the image of the interface, save the good:

Icon
This save method solves the problem of burrs, so there is no use of png8 hard edges or using png24 blue-bottomed problems. But the half of the picture is full, so if the picture is half through and the half through is to be retained, then my approach is to use the filter under IE6 only in PNG24 format.

C. Use filters.

The code is as follows	Copy Code
_filter:progid:dximagetransform.microsoft.alphaimageloader (src= "/dot_2.png"); _background:none;

D. Using GIF and JPG is another option, in addition to PNG8. IE6 and other browsers can be divided into two different picture formats, the picture is compatible chant.