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 :

88ec3091817142757563c63a206d98b3 = linear-gradient([ [ 0c0cb308ee3d2ee3281772bfc9b806c2| to af9fecd782e82fdb27328a37b5efd76c ] ,] ? 9abf9243314f6d1cd71ac1087d19db3b[, 9abf9243314f6d1cd71ac1087d19db3b]+)

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

9abf9243314f6d1cd71ac1087d19db3b = b10fb37415d019cfffa8c4d7366c607f [ d82af2074b26fcfe177e947839b5d381 | 42c97a047d75abc12b9b351eb8562711 ]?

##d907771b9796ac44f0a38589ace9c371: 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;

9abf9243314f6d1cd71ac1087d19db3b: Set the starting and ending colors of the specified gradient

b10fb37415d019cfffa8c4d7366c607f: Specify the color

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

42c97a047d75abc12b9b351eb8562711: 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!