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

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%);
}

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='#000000', endColorstr='#ffffff',GradientType=0 );
}

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;}

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='#000000', endColorstr='#ffffff',GradientType=0 );
}:root .gradient{filter:none;}

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!