css背景颜色ie兼容,css 背景色渐变兼容写法

CSS3：linear-gradient

比如：黑色渐变到白色，代码如下：

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

}

说明：linear-gradient 具体用法。

ie 滤镜：filter

linear-gradient 在 ie9 以下是不支持的，所以对于 ie6 - ie8 我们可以使用滤镜来解决，代码如下：

.gradient{

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

}

由于 filter 是 ie 的私有属性，所以我们需要针对 ie9 单独处理滤镜效果，代码如下：

:root {filter:none;}

总结：

综上所述，线性渐变的兼容写法如下：

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

CSS3：linear-gradient 比如：黑色渐变到白色，代码如下： .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%); } 说明：linear-gradient 具体用法。 ie 滤镜：filter linear-gradient 在 ie9 以下是不支持的，所以对于 ie6 - ie8 我们可以使用滤镜来解决，代码如下： .gradient{ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=#000000, endColorstr=#ffffff,GradientType=0 ); } 由于 filter 是 ie 的私有属性，所以我们需要针对 ie9 单独处理滤镜效果，代码如下： :root {filter:none;} 总结： 综上所述，线性渐变的兼容写法如下： .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;}