CSS3 gradient background compatibility issues

When we make a gradient background color, we will use the linear-gradient() function to create a linear gradient "image". It is the syntax in CSS3, and is compatible with IE10 at least

background-image: linear-gradient(to right, #ff9000, #ff5000);

direction: used to specify the gradient direction. It can accept an angle value (available in deg, rad, grad, or turn) or a direction keyword (top, right, bottom, left, left top, top right, bottom right, or left bottom).

color-start, color-end: indicates the starting color and ending color respectively

This is an example of Taobao's navigation bar, and its gradient color is implemented as follows:

background-image: linear-gradient(to right, #ff9000, #ff5000);

However, linear-gradient() is compatible with IE10 at least. To be compatible with IE8 and IE9, you can only use filter instead, as follows:

background-image: linear-gradient(to right, #ff9000, #ff5000);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffff9000', 
endColorstr='#ffff5000', GradientType=1);
-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffff9000', 
endColorstr='#ffff5000', GradientType=1);

When we use filters to achieve gradients, we must pay attention to the fact that the color value cannot be filled in with abbreviations (such as #000), but must be written in full. Let's take a look at the difference between #000 and #000000:

When it is #000

filter:progid:DXImageTransform.Microsoft.gradient
(startColorstr='#000',
 endColorstr='#ffff5000', 
GradientType=1)
;

Execution Result:

When it is #000000

filter:progid:
DXImageTransform.Microsoft.gradient
(startColorstr='#000000', 
endColorstr='#ffff5000', GradientType=1);

Execution Result:

Next, let's analyze the value in the filter:

Careful friends can see that there are two more ff in the startColorstr and endColorstr color values ​​in the filter. In fact, startColorstr and endColorstr do not simply represent colors. Their format should be #AARRGGBB. AA, RR, GG, BB are positive hexadecimal integers. The value range is 00 - FF. RR specifies red values, GG specifies green values, and BB specifies blue values. AA specifies transparency. 00 is completely transparent. FF is completely opaque. Values ​​outside the range will be restored to the default value. The value range is #FF000000 - #FFFFFFFF. AA is similar to the a in rgba() we learned before, both of which are used to set transparency.

GradientType=1 indicates direction, 1 indicates horizontal direction, 0 indicates vertical direction

This is the end of this article about the compatibility issues of gradient background implementation in CSS3. For more relevant CSS3 gradient background content, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future!