Detailed explanation of how to make the background color gradient compatible with css-CSS Tutorial-php.cn

Detailed explanation of how to make the background color gradient compatible with css

黄舟

Release： 2017-07-19 10:54:17

Original

1936 people have browsed it

In recent projects, linear gradients have been used in many places, such as the background of the form submission button, the title background of the data display, etc. The previous practice was to cut the 1px image and then repeat-x. Below I will introduce how to use css to achieve this effect.

css3: linear-gradient

For example: black gradient to white, the code is as follows:

.gradient{
    background: -moz-linear-gradient(top, #000000 0%, #ffffff 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#000000), color-stop(100%,#ffffff));
    background: -webkit-linear-gradient(top, #000000 0%,#ffffff 100%);
    background: -o-linear-gradient(top, #000000 0%,#ffffff 100%);
    background: -ms-linear-gradient(top, #000000 0%,#ffffff 100%);
    background: linear-gradient(to bottom, #000000 0%,#ffffff 100%);
}

Copy after login

Instructions: linear-gradient specific usageClick here to enter.

ie filter: filter

linear-gradient is not supported below ie9, so for ie6 - ie8 we can use filter To solve the problem, the code is as follows:

.gradient{
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=&#39;#000000&#39;, endColorstr=&#39;#ffffff&#39;,GradientType=0 );
}

Copy after login

Since filter is a private property of ie, we need to handle the filter effect separately for ie9, the code is as follows:

:root {filter:none;}

Copy after login

Summary:

To sum up, the compatible writing method of linear gradient is as follows:

.gradient{
    background: #000000;
    background: -moz-linear-gradient(top,  #000000 0%, #ffffff 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#000000), color-stop(100%,#ffffff));
    background: -webkit-linear-gradient(top,  #000000 0%,#ffffff 100%);
    background: -o-linear-gradient(top,  #000000 0%,#ffffff 100%);
    background: -ms-linear-gradient(top,  #000000 0%,#ffffff 100%);
    background: linear-gradient(to bottom,  #000000 0%,#ffffff 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=&#39;#000000&#39;, endColorstr=&#39;#ffffff&#39;,GradientType=0 );
}:root .gradient{filter:none;}

Copy after login

The above is the detailed content of Detailed explanation of how to make the background color gradient compatible with css. For more information, please follow other related articles on the PHP Chinese website!