CSS implementation compatibility gradient background (gradient) effect compatible with many browsers

one, a little 俗态 opening.

If two years ago, the term "compatibility gradient effect" was not expected to be raised, at that time, talking about the gradient background, most of the thought is the gradient filter ie, other browsers have not yet supported, but, in the CSS3 support increasingly perfect today, to achieve compatibility of the gradient background effect has been completely possible, This article will show you how to implement a gradient background effect for compatibility. Opera browsers are not currently supported in many browsers.

This article example effect is the same effect, is the vertical gradient, starting color red, ending color blue, the end of the blue transparency is 0.5.

Second, ie browser under the gradient background

The use of IE's gradient filter is required for using the gradient background in IE Explorer. The following code:

Copy Code code as follows:


filter:progid:DXImageTransform.Microsoft.gradient (startcolorstr=red,endcolorstr=blue,gradienttype=1);

Related instructions:
The filter code above has three main parameters, followed by: StartColorStr, EndColorStr, and GradientType.
where gradienttype=1 represents a transverse gradient, gradienttype=0 represents a longitudinal change. Startcolorstr= "Color" represents the color at the beginning of a gradient gradient, and endcolorstr= "color" represents the color at the end of the gradient.

The above code to achieve a red to blue gradient, but does not contain transparency changes, this is because IE has not yet supported opacity properties and RGBA color, to achieve the transparency of IE changes, or the need to use IE filters, ie transparency Filter function is more powerful, This power is similar to the use of css-gradient background gradients in Firefox or Safari browsers. For example, use the following:

Copy Code code as follows:


Filter:alpha (opacity=100 finishopacity=0 style=1 startx=0,starty=5,finishx=90,finishy=60)

The meanings of each of these parameters are as follows:
Opacity represents transparency, the default range is from 0 to 100, they are actually in the form of percentages. In other words, 0 represents total transparency, and 100 represents total opacity.
Finishopacity is an optional parameter, and if you want to set the transparency effect of a gradient, you can use them to specify the transparency at the end. The range is also 0 to 100.
Style is used to specify the shape characteristics of transparent areas:
0 represents a unified shape
1 representing linear
2 represents radial
3 represents a rectangle.
StartX the x-coordinate at the beginning of the gradient transparency effect.
Starty the y-coordinate at the beginning of the gradient transparency effect.
Finishx the x-coordinate at the end of the gradient transparency effect.
Finishy the y-coordinate at the end of the gradient transparency effect.

Integrated above, the implementation of IE with transparency changes in the red and blue vertical gradient code is as follows:

Copy Code code as follows:


. gradient{


width:300px;


height:150px;


Filter:alpha (opacity=100 finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=150) Progid:D XImageTransform.Microsoft.gradient (startcolorstr=red,endcolorstr=blue,gradienttype=1);


-ms-filter:alpha (opacity=100 finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=150) Progid:D XImageTransform.Microsoft.gradient (startcolorstr=red,endcolorstr=blue,gradienttype=1);


}


<div class= "gradient" ></div>

Third, the Firefox browser under the gradient background

For the Firefox browser (Firefox 3.6+) Implementation of the gradient background to use the CSS3 gradient properties,-moz-linear-gradient properties, in the previous article I introduced in detail the Firefox3.6 gradient background of the implementation, You are interested to click here: CSS gradient CSS3 gradient is used under Firefox3.6. Here I am no longer specific, for the implementation of the effect to be implemented as mentioned at the beginning of this article, see the following code:

Copy Code code as follows:


. gradient{


width:300px;


height:150px;


background:-moz-linear-gradient (Top, Red, RGBA (0, 0, 255, 0.5));


}


<div class= "gradient" ></div>

Four, Chrome/safari browser under the gradient background implementation

For WebKit core browsers, such as Chrome/safari browser, the implementation of the gradient background is also the use of CSS3 gradient method, css-gradient, specifically-webkit-gradient, so that the term Firefox browser is somewhat different. I have a very detailed description of this in the last article, you can ruthlessly click here: CSS gradient gradient WebKit core browser use. The specific use is not detailed, see the following code:

Copy Code code as follows:


. gradient{


width:300px;


height:150px;


background:-webkit-gradient (linear, 0 0, 0 bottom, from (#ff0000), to (RGBA (0, 0, 255, 0.5));


}


<div class= "gradient" ></div>

v. Integrated-compatibility gradient background effect

The relevant code is as follows:

Copy Code code as follows:


. gradient{


width:300px;


height:150px;


Filter:alpha (opacity=100 finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=150) Progid:D XImageTransform.Microsoft.gradient (startcolorstr=red,endcolorstr=blue,gradienttype=0);


-ms-filter:alpha (opacity=100 finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=150) Progid:D XImageTransform.Microsoft.gradient (startcolorstr=red,endcolorstr=blue,gradienttype=0);/*ie8*/


background:red; * * Some browsers that do not support background gradients/


background:-moz-linear-gradient (Top, Red, RGBA (0, 0, 255, 0.5));


background:-webkit-gradient (linear, 0 0, 0 bottom, from (#ff0000), to (RGBA (0, 0, 255, 0.5));


}


<div class= "gradient" ></div>

---------------------------------------------------------------------
This is the only tutorial I've found that I can achieve.