根据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. 安装Hadoop及Spark(Ubuntu 16.04)

    安装Hadoop及Spark(Ubuntu 16.04) 安装JDK 下载jdk(以jdk-8u91-linux-x64.tar.gz为例) 新建文件夹 sudo mkdir /usr/lib/jvm ...

  2. 深圳尚学堂：JavaScript的常见面试题

    经常说编程是一门技术专业,在找工作时面试官肯定不止看你的面试能力,还要看你的专业知识掌握,他可能会让你做一个小的编程测试,或者说考察你的语法知识掌握,今天,总结了一些关于在JavaScript中常常会 ...

  3. HQL连接查询

    HQL提供了连接查询机制如内连接,外连接,,还允许显示指定迫切内连接,和迫切外联结. 连接类型 内连接 inner join 或join 迫切内链接 inner join fetch 左外联结  le ...

  4. 简学Python第一章__进入PY的世界

    #cnblogs_post_body h2 { background: linear-gradient(to bottom, #18c0ff 0%,#0c7eff 100%); color: #fff ...

  5. 关系型数据库MySql-模糊搜索优化(like %abc%):全文搜索引擎技术选型

    1.阿里云OpenSearch 阿里云开放搜索OpenSearch是一款阿里巴巴自主研发的大规模分布式搜索引擎平台,该平台承载了淘宝.天猫.1688.神马搜索.口碑.菜鸟等搜索业务,通过OpenSea ...

  6. 【Zookeeper】源码分析之请求处理链（二）

    一.前言 前面学习了请求处理链的RequestProcessor父类,接着学习PrepRequestProcessor,其通常是请求处理链的第一个处理器. 二.ZooKeeper源码分析 2.1 类的 ...

  7. ReactNative入门(2)ECMAScript 6简介

    ECMAScript 6(以下简称ES6)是JavaScript语言的下一代标准.因为当前版本的ES6是在2015年发布的,所以又称ECMAScript 2015. 也就是说,ES6就是ES2015. ...

  8. JavaScript中国象棋程序（7） - 置换表

    "JavaScript中国象棋程序" 这一系列教程将带你从头使用JavaScript编写一个中国象棋程序.这是教程的第2节. 这一系列共有9个部分: 0.JavaScript中国象 ...

  9. C/C++面试之算法系列－－去除数组中的重复数字

    去除数组中的重复数字 Sailor_forever  sailing_9806@163.com 转载请注明 http://blog.csdn.net/sailor_8318/archive/2008/ ...

  10. nginx配置参数详解

    配置参数详解 user nginx nginx ; Nginx用户及组:用户 组.window下不指定 worker_processes 8; 工作进程:数目.根据硬件调整,通常等于CPU数量或者2倍 ...