CSS3 implementation of gradient background compatibility

Time:2021-5-10

When we make a gradient background color, we will use the linear gradient() function to create a linear gradient “image”. It is the syntax of 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 a value representing the angle (available units DEG, rad, grad or turn) or a keyword representing the direction (top, right, bottom, left, left top, top right, bottom right or left bottom).

color-start,   Color end: represents the start color and the end color respectively

This is an example of Taobao’s navigation bar. Its gradient is as follows:


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

However, the minimum compatibility of linear gradient() is ie10. To be compatible with IE8 and IE9, only filter can be used 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 filter to realize gradient, we should pay attention to that the color value can not be filled in abbreviations (such as # 000), but must be written completely. Let’s see the difference between # 000 and # 000000

When it’s a thousand


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

Implementation results:

When it’s a million


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

Implementation results:

Next, we analyze the values in the filter

Careful friends can see that the color values of startcolorstr and endcolorstr in the filter are two more FF. In fact, startcolorstr and endcolorstr are not simple colors. Their format should be aarrggbb. AA, RR, GG and BB are hexadecimal positive integers. The value range is 00 – FF. RR specifies the red value, GG specifies the green value, BB specifies the blue value.   AA specifies transparency. 00 is completely transparent. FF is completely opaque. Values out of range are restored to the default values. The value range is # ff000000 – # ffffffff. AA is similar to a in RGBA (), which we learned before. It sets transparency.

Gradienttype = 1 for direction, 1 for horizontal, 0 for vertical

So far, this article about CSS3 implementation of gradient background compatibility is introduced here. For more relevant CSS3 gradient background content, please search previous articles of developer or continue to browse the following related articles. I hope you can support developer more in the future!