你的位置:首页 > 网页设计

[网页设计](转)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;}
复制代码

PS:

在实际的项目中,往往会碰到圆角和渐变的组合,如果使用上面的写法,那么在 ie9 下会有 bug(在 ie9 下背景色不能完全切完),解决方法是SVG,具体点此查看。