根据caniuse（http://caniuse.com/#search=gradient），gradient兼容性为IE10以及以上浏览器。

实例代码：

 <!doctype html>

 <html lang="en">

     <head>

         <meta charset="UTF-8" />

         <title>gradient 兼容性处理</title>

         <style type="text/css">

             * {

                 margin: 0;

                 padding: 0;

             }

             .parent {

                 width: 400px;

                 height: 400px;

                 margin: 100px;

                 font-size: 20px;

                 color: #FF0000;

                 border: 1px solid red;

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

             }

         </style>

     </head>

     <body>

         <div class="parent">

         </div>

     </body>

 </html>

chrome浏览器效果：

IE8浏览器效果（无渐变）：

gradient兼容性处理：

 .parent {

                 width: 400px;

                 height: 400px;

                 margin: 100px;

                 font-size: 20px;

                 color: #FF0000;

                 border: 1px solid red;

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

             }

设置filter属性目的是上一行的透明度不起作用的时候执行，filter: progid:DXImageTransform.Microsoft.gradient是用来做渐变的，GradientType:可读写，设置或检索色彩渐变的方向：
　　1:默认值。水平渐变。 
　　0:垂直渐变。

总结：至此完成IE9以及以下IE浏览器gradient兼容性处理。

gradient渐变IE兼容处理的更多相关文章

  1. gradient 线性渐变 浏览器兼容

    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=white, endColorstr= ...

  2. CSS3 Gradient 渐变

    转载自:http://www.w3cplus.com/content/css3-gradient CSS3发布很久了,现在在国外的一些页面上常能看到他的身影,这让我羡慕已久,只可惜在国内为了兼容IE, ...

  3. ie6+7+8等对background-color:rgba(),background-img渐变的兼容

    一,ie8兼容rgba()的解决办法 今天遇到了一个问题,要在一个页面中设置一个半透明的白色div.这个貌似不是难题,只需要给这个div设置如下的属性即可: background: rgba(255, ...

  4. CSS-背景渐变的兼容写法

    background-image: -moz-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.5) 75%); background-image: - ...

  5. CSS 3 属性学习 —— 1. Gradient 渐变

    CSS3 中渐变分为: 线性渐变(linear-gradient)和径向渐变(radial-gradient)两种. 1. 线性渐变 参数:  <linear-gradient> = li ...

  6. CSS gradient渐变之webkit核心浏览器下的使用以及实例

    一.关于渐变 渐变是一种应用于平面的视觉效果,可以从一种颜色逐渐地转变成另外一种颜色,故可以创建类似于彩虹的效果渐变可以应用在任何可以使用图片的地方.例如,您可以指定一个这么一个渐变:顶部的颜色是红色 ...

  7. ie 9 渐变背景色兼容问题

    /*窗口背景*/  .window {    background-color: #fff;    background: -webkit-linear-gradient(top,#EFF5FF 0, ...

  8. gradient 渐变

    看了大漠 写的关于 Gradient 的文章,我也想写点以便加深记忆. 首先gradient 分为linear-gradient (线性渐变) 和 radial-gradient(径向渐变),渐变是作 ...

  9. CSS gradient渐变之webkit核心浏览器下的使用

    一.关于渐变 渐变是一种应用于平面的视觉效果,可以从一种颜色逐渐地转变成另外一种颜色,故可以创建类似于彩虹的效果渐变可以应用在任何可以使用图片的地方.例如,您可以指定一个这么一个渐变:顶部的颜色是红色 ...

随机推荐

  1. atom编辑器快捷键

    挑来挑去,还是决定选择atom,做为我的编程编辑器. 下面是我总结的atom快捷键 //1.atomcmd+,; 设置cmd+h; 隐藏程序cmd+alt+h; 隐藏其他程序 //2.文件cmd+n; ...

  2. js之Math对象

    ; var num1 = Math.floor(num); // 向下取整 var num2 = Math.ceil(num); // 向上取整 document.write(num2+'-<b ...

  3. Mac和Linux系统的：Arp欺骗源码

    linux系统, 简化版的ARP欺骗工具 精简版, 没有很多代码, 只要把准备好的数据, 发送给到网卡接口, 利用这个工具, 可以让局域网内的一台计算机暂时掉线: #include <stdio ...

  4. Python学习--20 Web开发

    HTTP格式 HTTP协议是基于TCP和IP协议的.HTTP协议是一种文本协议. 每个HTTP请求和响应都遵循相同的格式,一个HTTP包含Header和Body两部分,其中Body是可选的. HTTP ...

  5. Jenkins在windows上的安装配置

     今天是2月14号,所谓西方情人节,下班回来发现,2月14过的比七夕还火热.于是上网百度百科查询了"情人节". 毕竟是中国的百度啊.是这么解释的.我感到很欣慰.过得每一个节日都应该 ...

  6. Linux输入子系统(一) _驱动编码

    输入设备都有共性:中断驱动+字符IO,基于分层的思想,Linux内核将这些设备的公有的部分提取出来,基于cdev提供接口,设计了输入子系统,所有使用输入子系统构建的设备都使用主设备号13,同时输入子系 ...

  7. php编译安装

    php编译安装含mcrypt扩展 开始前准备 1.php源码下载 这里用的是php5.6.22版本 wget -c http://cn2.php.net/get/php-5.6.22.tar.gz/f ...

  8. oracle系列笔记(1)---查询数据

    查询数据 1. 查询(select .. form ..)    (1)普通查询 select * from employees --代表查询employees表中所有数据 select last_n ...

  9. 基于Hadoop的改进Apriori算法

    一.Apriori算法性质 性质一: 候选的k元组集合Ck中,任意k-1个项组成的集合都来自于Lk. 性质二: 若k维数据项目集X={i1,i2,-,ik}中至少存在一个j∈X,使得|L(k-1)(j ...

  10. 下载安装Cygwin

    下载程序 http://www.cygwin.com/ 安装程序 下载完成后,运行setup.exe程序,出现安装画面. 直接点“下一步”,出现安装模式的对话框,如下图所示: 这里可以看到有三种安装模 ...