css 背景色渐变兼容写法_html/css_WEB-ITnose
程序员文章站
2022-05-22 18:30:09
...
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,具体点此查看。
推荐阅读
-
[转]CSS浏览器兼容问题总结_html/css_WEB-ITnose
-
CSS 过滤器 兼容ie,火狐和谷歌_html/css_WEB-ITnose
-
CSS实现背景透明,文字不透明(兼容各浏览器)_html/css_WEB-ITnose
-
ul li的兼容性问题_html/css_WEB-ITnose
-
360浏览器兼容问题_html/css_WEB-ITnose
-
CSS3兼容IE的大杀器_html/css_WEB-ITnose
-
博客兼容手机浏览_html/css_WEB-ITnose
-
博客兼容手机浏览_html/css_WEB-ITnose
-
这2种写法是什么意思_html/css_WEB-ITnose
-
怎么实现背景色从中间往两边渐变?_html/css_WEB-ITnose