CSS3 Gradient Background Color use method compatible ie9+

Background color, in addition to solid color, you can use a variety of color combinations to become the gradient background color, make the page rich.

The gradient background is divided into two types:

1, linear gradient;

2, annular gradient;

Linear gradient

Linear gradients are divided into: horizontal, vertical, diagonal gradient of three gradients

Syntax :

<linear-gradient> = linear-gradient ([[<angle>| to <aside-or-corner>],]? <color-stop >[, <color-stop>]+)

<side-or-corner> = [left | right] | | [Top | bottom]

<color-stop> = <color> [<length> | <percentage>]?

<angle>: Specifies the direction of the gradient with an angle value.

To left: Sets the gradient to right-to-bottom;

To right: Sets the gradient to left-to-bottom;

To top: Sets the gradient from bottom to top;

To bottom: Sets the gradient to top to bottom;

<color-stop>: Sets the start and end color of the specified gradient

<COLOR>: Specify color

<length>: Specify the start and end color position with a length value. Negative values are not allowed

<percentage>: Specifies the position of the starting and ending color in percent.

Background:linear-gradient (parameter 1, parameter 2, parameter 3, Parameter 4 ....) Parameter n)

Parameter 1: Can fill not fill, write the words such as: to right, is the direction of the gradient from left to bottom, do not fill the default from top to bottom gradient.

Parameter 1 ': basically consistent with parameter 1, written in the case of-webkit-,-moz-,-o-prefix, such as: left represents the beginning of the gradient direction

Parameter 2: Gradient start color, can be filled with rgba () or #fff or white, followed by a percentage to indicate how much the color, such as #fff 50% for the proportion of 50% of the whites.

Parameter 3: If no parameters are followed by the gradient end color, and the parameter 2 property is optional consistent.

Parameter 4 .... Parameter n: The gradient color node that can be added. Last one for gradient end color

Example :

Linear-gradient (#fff, #75aaa3); Linear-gradient (to bottom, #fff, #75aaa3); Linear-gradient (to Top, #75aaa3, #fff); Linear-gradient (180deg, #fff, #75aaa3); Linear-gradient (to bottom, #fff 0, #75aaa3 100%);

However, a compatible browser is also required:

From bottom to top #text.btt{background:-webkit-linear-gradient (Bottom, #fff, #75aaa2); background:-o-linear-gradient (bottom,# FFF, #75aaa2); background:-moz-linear-gradient (bottom, #fff, #75aaa2); Background:linear-gradient (to Top, #fff, # 75AAA2); /* Standard syntax (must be placed at the end) */}

With transparency #text.opac{background:-webkit-linear-gradient (Rgba (256,256,256,0), #75aaa2); background:-o-linear-gradient (Rgba (256,256,256,0), #75aaa2); background:-moz-linear-gradient (Rgba (256,256,256,0), #75aaa2); background: Linear-gradient (Rgba (256,256,256,0), #75aaa2); /* Standard syntax (must be placed at the end) */}