您现在的位置是：网站首页> 编程资料编程资料
CSS背景色渐变写法兼容ie6至ie9css 各浏览器下的背景色渐变【代码】css3 给背景设置渐变色的方法
2021-09-06
1081人已围观
简介 很多地方都用到了线性渐变，比如：表单提交按钮的背景，数据展示的标题背景等等，本例使用css3：linear-gradient及ie 滤镜：filter来实现
最近在项目中，有很多地方都用到了线性渐变，比如：表单提交按钮的背景，数据展示的标题背景等等，按照以前的做法是切 1px 图片然后 repeat-x。下面我将介绍如何用 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%);
}
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
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%);
}
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
相关内容
- web中自定义鼠标样式将其显示为左右箭头CSS Transition通过改变Height实现展开收起元素从QQtabBar看css命名规范BEM的详细介绍css实现两栏布局，左侧固定宽，右侧自适应的多种方法CSS 实现Chrome标签栏的技巧CSS实现两列布局的N种方法CSS实现隐藏搜索框功能(动画正反向序列)CSS3中Animation实现简单的手指点击动画的示例详解CSS中的特指度和层叠问题详解overflow:hidden的作用(溢出隐藏、清除浮动、解决外边距塌陷)关于CSS浮动与取消浮动的问题
- 浅析几个CSS3常用功能的写法纯CSS3实现3D波浪形动画有波浪起伏的效果一款简易的CSS3扁平化风格联系表单有创意非常特别的10款CSS3进度条Loading动画很有特色的CSS3小球浮动按钮与普通按钮有所不同纯CSS3绘制的蚱蜢动画还会眨眼非常酷纯css3样式属性制作各种图形图标样式代码纯CSS3实现页面加载后启动蝙蝠侠变身动画css3 自定义字体font-face使用介绍基于css3实现的鼠标悬停中英文切换导航菜单纯CSS3实现圆角效果（含IE兼容解决方法）
- 子Div使用Float后撑开父Div的几种方法设置div背景透明的方法示例CSS实现div不设高度完全居中div自适应高度自动填充剩余高度详解DIV+CSS的命名规矩才能有利于SEO优化的实现方法DIV或者DIV里面的图片水平与垂直居中的方法详解如何用div实现自制滚动条div对齐与网页布局详解DIV+CSS实现电台列表设计的示例代码div+css实现带箭头的面包屑导航栏不定宽高的文字在div中垂直居中实现方法
- CSS清除浮动大全共8种方法CSS Transition通过改变Height实现展开收起元素从QQtabBar看css命名规范BEM的详细介绍css实现两栏布局，左侧固定宽，右侧自适应的多种方法CSS 实现Chrome标签栏的技巧CSS实现两列布局的N种方法CSS实现隐藏搜索框功能(动画正反向序列)CSS3中Animation实现简单的手指点击动画的示例详解CSS中的特指度和层叠问题详解overflow:hidden的作用(溢出隐藏、清除浮动、解决外边距塌陷)关于CSS浮动与取消浮动的问题
- Web页面布局方式小结 网页DIV+CSS布局和动画美化全程实例 (陈益材) 随书光盘收罗CSS布局中有关水平和垂直居中的N种方法div+css布局中选择使用html标签的方法CSS3 Columns分列式布局方法简介css网站布局实录学习笔记第三部分网页布局与定位css网站布局实录学习笔记第一部分用css实现十字的布局示例代码CSS div布局需要注意的两点使用div+css布局过程中在什么时候使用table呢DIV CSS布局中position属性用法深入探究
- CSS控制DIV永远固定在页面底部不随滚动而滚动纯div+css实现的固定在网站底部不随网站滚动的在线客服特效源码CSS样式设置div滚动条示例代码css将div层固定显示在页面底部不随滚动条滚动css实现div自动添加滚动条(图片或文字等超出时显示)div css 滚动条样式 DIV滚动条属性及样式设置方式css 给div添加滚动并隐藏滚动条
- Less里css表达式的写法示例介绍LESS 让css也支持变量，运算符，include,嵌套规则等等 less让css具有动态语言的特性LESS 让css也支持变量，运算符，include,嵌套规则CSS less优化学习CSS预处理器:Sass和less进行对比less开发指南浏览器端如何使用Less
- css中postion的fixed与absolute区别详解CSS position:absolute全面了解css中position属性使用详解css中定位中的absolute和relative是什么意思css中position属性(absolute|relative|static|fixed)概述及应用CSS position属性absolute relative等五个值的解释关于CSS absolute与relative不得不说的话
- 通过CSS规则禁止选中文字的实现代码CSS Transition通过改变Height实现展开收起元素从QQtabBar看css命名规范BEM的详细介绍css实现两栏布局，左侧固定宽，右侧自适应的多种方法CSS 实现Chrome标签栏的技巧CSS实现两列布局的N种方法CSS实现隐藏搜索框功能(动画正反向序列)CSS3中Animation实现简单的手指点击动画的示例详解CSS中的特指度和层叠问题详解overflow:hidden的作用(溢出隐藏、清除浮动、解决外边距塌陷)关于CSS浮动与取消浮动的问题
- CSS清除浮动方法总结简要总结CSS编程中的响应式设计CSS的一些编程规范总结10个必备的CSS技巧总结css 调试方法与经验总结CSS多浏览器兼容总结(个人经验)CSS样式的基础学习总结深入CSS3 动画效果的总结详解IE下css常见问题总结及解决CSS(Cascading Style Sheet)级联样式表常用术语总结CSS学习总结
