How CSS sets layer transparency

So a little research, under this record:

Of course, to achieve transparency, many generally use three ways:

1, direct use of transparent pictures, this is really more direct, but often need to make pictures, personally think, maintainability is not good

2, use the following code to set the transparency, but you will find that this way can not set the elements of its child nodes opaque

The code is as follows:

Filter:alpha (opacity = 50);

-moz-opacity:0.5;

-khtml-opacity:0.5;

opacity:0.5;

3, this method uses only short code, that is, to achieve the setting of transparency, but also to implement the text and the elements in the node set opaque

First you need to set the following style for the layer that needs to be transparent:

The code is as follows:

Background:rgba (255,255,255,0.5) None repeat scroll!important;/* ensure the transparency of browsers such as Firefox, and colleagues reach the elements in their child nodes opaque * *

Background: #fff Filter:alpha (opacity = 50),///* Set filter for IE browser to achieve transparent effect * *

Then set the following style for its child nodes:

The code is as follows:

position:relative;/* is used to set the element opacity in the child nodes of IE browser.

This enables you to set transparency, or you can implement the text in it and the element settings in the node are opaque.

CSS Set transparent layer

Use the style sheet below to define your layer

. Alpha {Filter:alpha (opacity=50, finishopacity=50, style=0, startx=0, starty=0, finishx=100, finishy=100}

Explain:

Opacity= starting opacity (100 is opaque)

Finishopacity= the end of the opacity (100 of the words will not be transparent)

Style= style, starting from 0, 1.2.3 ... have even transparent ah, radiation shape transparent ah ...

Startx= begins the transparent x-coordinate, basically the picture, the upper-left corner of the layer (0)

Starty= begins the transparent y-coordinate, which is basically the picture, the upper-left corner of the layer (0)

finishx= end transparent x coordinate, basically also picture, bottom right of layer (picture, width of layer)

Finishy= ends the transparent y-coordinate, which is basically the picture, the lower-right corner of the layer (picture, height of the layer)

Black and white photo filter:gray;

X-ray photo Filter:xray;

Wind dynamic fuzzy Filter:blur (add=true,direction=45,strength=30);

Sinusoidal Ripple Filter:wave (add=0, freq=60, Lightstrength=1, phase=0, strength=3);

Translucent effect Filter:alpha (OPACITY=50);

Linear transparent Filter:alpha (opacity=0, finishopacity=100, style=1, startx=0, starty=0, finishx=100, finishy=140);

Radiation-Transparent Filter:alpha (opacity=10, finishopacity=100, style=2, startx=30, starty=30, finishx=200, FinishY=200);

White Transparent Filter:chroma (color= #FFFFFF);

Reduce color filter:grays;

Negative effect Filter:invert;

Flip Filter:fliph around;

Flip FILTER:FLIPV vertically;

Projection effect Filter:progid:dXImageTransform.Microsoft.DropShadow (color= #cccccc, offx=5,offy=5,positives=true);

Mosaic filter:progid:dXImageTransform.Microsoft.Pixelate (maxsquare=3);

Luminous effect Filter:progid:dXImageTransform.Microsoft.Glow (color= #cccccc, strength=5);

Soft Edge effect Filter:alpha (opacity=100, finishopacity=0,style=2