How to use CSS3 gradient background color, compatible with IE9+

Background color, in addition to solid color, can also use a variety of color combinations to form gradient background colors to enrich the page.

Gradient backgrounds are divided into two types:

1. Linear gradient;

2. Circular gradient;

Linear gradient

Linear gradient is divided into three types: horizontal, vertical and diagonal gradient

Syntax :

= linear-gradient([ [ | to ] ,] ? [, ]+)

= [left | right] || [top | bottom ]

= [ | ]?

##< angle>: Use the angle value to specify the direction of the gradient.

to left: set the gradient from right to left;

to right: set the gradient from left to right;

to top: Set the gradient from bottom to top;

to bottom: Set the gradient from top to bottom;

: Set the starting and ending colors of the specified gradient

: Specify the color

: Use the length value to specify the starting and ending color positions. Negative values ​​are not allowed

: Use percentage to specify the starting and ending color positions.

background:linear-gradient(parameter 1, parameter 2, parameter 3, parameter 4....parameter N)

Parameter 1: It can be filled in or not filled in. If filled in, write the direction such as: to right, which means the gradient direction is from left to right. If not filled in, the gradient will be from top to bottom by default.

Parameter 1': Basically the same as parameter 1, written with -webkit-,-moz-,-o- prefix, such as: left represents the starting position of the gradient direction

Parameter 2 : Gradient starting color, you can fill in rgba() or #fff or white, followed by a percentage to represent the proportion of the color, such as #fff 50% represents 50% of the white color.

Parameter 3: If there is no parameter later, it is the gradient termination color, which is consistent with the optional attribute of parameter 2.

Parameter 4....Parameter N: Gradient color node that can be added. The last one is the gradient termination 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:

//从下至上
#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); /* 标准的语法（必须放在最后） */
}

##

//带透明度
#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); /* 标准的语法（必须放在最后） */
}

The above is the detailed content of How to use CSS3 gradient background color, compatible with IE9+. For more information, please follow other related articles on the PHP Chinese website!