【原链接】http://www.2cto.com/kf/201310/248187.html
<style type="text/css">

    .linear{   
        width:100%;   
        height:600px;   
        FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#b8c4cb,endColorStr=#f6f6f8); /*IE 6 7 8*/   
        background: -ms-linear-gradient(top, #fff,  #0000ff);        /* IE 10 */  
        background:-moz-linear-gradient(top,#b8c4cb,#f6f6f8);/*火狐*/   
        background:-webkit-gradient(linear, 0% 0%, 0% 100%,from(#b8c4cb), to(#f6f6f8));/*谷歌*/   
        background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#0000ff));      /* Safari 4-5, Chrome 1-9*/  
        background: -webkit-linear-gradient(top, #fff, #0000ff);   /*Safari5.1 Chrome 10+*/  
        background: -o-linear-gradient(top, #fff, #0000ff);  /*Opera 11.10+*/  
    }   
</style>   
  
 <body>  
    <div class="linear"></div>  
 </body>  
 
 
一、有点俗态的开场白
要是两年前，实现“兼容性的渐变效果”这个说法估计不会被提出来的，那个时候，说起渐变背景，想到的多半是IE的渐变滤镜，其他浏览器尚未支持，但是，在对CSS3支持日趋完善的今天，实现兼容性的渐变背景效果已经完全成为可能，本文就将展示如何实现兼容性的渐变背景效果。在众多的浏览器中，目前不支持Opera浏览器。
本文实例效果都是同样的效果，就是垂直渐变，起始颜色红色，结束颜色蓝色，结束的蓝色的透明度是0.5。
二、IE浏览器下的渐变背景
IE浏览器下渐变背景的使用需要使用IE的渐变滤镜。如下代码：
[css]  
filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=red,endcolorstr=blue,gradientType=1);  
 
相关说明：
上面的滤镜代码主要有三个参数，依次是：startcolorstr, endcolorstr, 以及gradientType。
其中gradientType=1代表横向渐变，gradientType=0代表纵向淅变。startcolorstr=”色彩” 代表渐变渐变起始的色彩，endcolorstr=”色彩” 代表渐变结尾的色彩。
上面代码实现的是红色至蓝色的渐变，但是不含透明度变化，这是由于IE目前尚未支持opacity属性以及RGBA颜色，要实现IE下的透明度变化，还是需要使用IE滤镜，IE的透明度滤镜功能比较强大，这种强大反而与Firefox或是Safari浏览器下的css-gradient背景渐变的用法类似。例如下面的使用：
[css]  
filter:alpha(opacity=100 finishopacity=0 style=1 startx=0,starty=5,finishx=90,finishy=60)  
 
其中各个参数的含义如下：
opacity表示透明度，默认的范围是从0 到 100，他们其实是百分比的形式。也就是说，0代表完全透明，100代表完全不透明。 
finishopacity 是一个可选参数，如果想要设置渐变的透明效果，就可以使用他们来指定结束时的透明度。范围也是0 到 100。
style用来指定透明区域的形状特征：
0 代表统一形状
1 代表线形
2 代表放射状
3 代表矩形。
startx 渐变透明效果开始处的 X坐标。
starty 渐变透明效果开始处的 Y坐标。 
finishx 渐变透明效果结束处的 X坐标。 
finishy 渐变透明效果结束处的 Y坐标。
综合上述，实现IE下含透明度变化红蓝垂直渐变的代码如下：
[css]  
.gradient{  
    width:300px;  
    height:150px;  
    filter:alpha(opacity=100 finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=150) progid:DXImageTransform.Microsoft.gradient(startcolorstr=red,endcolorstr=blue,gradientType=1);  
    -ms-filter:alpha(opacity=100 finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=150) progid:DXImageTransform.Microsoft.gradient(startcolorstr=red,endcolorstr=blue,gradientType=1);  
}  
  
<div class="gradient"></div>  
 
三、Firefox浏览器下的渐变背景
对于Firefox浏览器下(Firefox 3.6+)渐变背景的实现需使用CSS3渐变属性，-moz-linear-gradient属性，在之前文章我详细介绍了Firefox3.6下渐变背景的实现，您有兴趣可以狠狠地点击这里：CSS渐变之CSS3 gradient在Firefox3.6下的使用 。这里我就不再具体讲述了，对于本文开头提到的要实现的效果的实现可以参见下面的代码：
[css]  
.gradient{  
    width:300px;  
    height:150px;  
    background:-moz-linear-gradient(top, red, rgba(0, 0, 255, 0.5));    
}  
  
<div class="gradient"></div>  
 
四、chrome/Safari浏览器下的渐变背景实现
对于webkit核心的浏览器，如Chrome/Safari浏览器下渐变背景的实现也是使用CSS3 渐变方法，css-gradient，具体为-webkit-gradient，使用语Firefox浏览器是有一些差异的。我在上上一篇文章对此进行了非常详细的介绍，您可以狠狠地点击这里：CSS gradient渐变之webkit核心浏览器下的使用 。具体使用就不详述了，参见下面的代码：
[css]  
.gradient{  
    width:300px;  
    height:150px;  
    background:-webkit-gradient(linear, 0 0, 0 bottom, from(#ff0000), to(rgba(0, 0, 255, 0.5)));    
}  
  
<div class="gradient"></div>  
 
补充于2011-04-07
Opera11也支持了CSS3渐变。其用法与Firefox一致，需要使用-o-的前缀。另外，Chrome的渐变用法也开始向FireFox浏览器下的用法靠拢。
五、综合 – 兼容性的渐变背景效果
相关代码如下：
[css]  
.gradient{  
    width:300px;  
    height:150px;  
    filter:alpha(opacity=100 finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=150) progid:DXImageTransform.Microsoft.gradient(startcolorstr=red,endcolorstr=blue,gradientType=0);  
    -ms-filter:alpha(opacity=100 finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=150) progid:DXImageTransform.Microsoft.gradient(startcolorstr=red,endcolorstr=blue,gradientType=0);/*IE8*/      
    background:red; /* 一些不支持背景渐变的浏览器 */    
    background:-moz-linear-gradient(top, red, rgba(0, 0, 255, 0.5));    
    background:-webkit-gradient(linear, 0 0, 0 bottom, from(#ff0000), to(rgba(0, 0, 255, 0.5)));    
    background:-o-linear-gradient(top, red, rgba(0, 0, 255, 0.5));   
}  
  
<div class="gradient"></div>  
 
六、结语
CSS3的潜力非常的大，就渐变这一块可以创建很多精湛的UI效果，而以往这些效果都只能使用图片实现。CSS渐变背景的实现可以有效降低网页的图片数，也就是降低了HTTP请求，是非常受用的。但是IE浏览器一直蹲在茅厕边啃鸡腿——自以为美味，得使用资源消耗很高的滤镜才能实现渐变效果。所以，目前而言，渐变背景的的应用与否还是有待于利弊权衡的。

【转】CSS设置DIV背景色渐变显示的更多相关文章

  1. CSS设置DIV背景色渐变显示

    本文转载自:http://blog.csdn.net/gingerredjade/article/details/12191741 <style type="text/css" ...

  2. CSS设置DIV背景色渐变

    div{ width: 200px; height: 200px; FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=, ...

  3. JS---案例：点击按钮设置div背景色渐变

    案例:点击按钮设置div背景色渐变 背景色渐变:设置透明度 <div id="dv"></div> <input type="button& ...

  4. CSS布局与定位——height百分比设置无效/背景色不显示

    CSS布局与定位——height百分比设置无效/背景色不显示 html元素属性width和height的值有两种表达方式,一是固定像素如“100px”,一是百分比如“80%”, 使用百分比的好处是元素 ...

  5. 功能整合（一）：滚动条的变相隐藏、js控制div的渐变显示、滚动条监听

    1.滚动条的变相隐藏 思路: 1.  把body的横向,纵向的超出部分隐藏,宽设置100%:高设置100%.就没有body的滚动条了, 2.  然后把最外层的div的宽设置的比body的宽宽一点,把d ...

  6. img只显示图片一部分 或 css设置背景图片只显示图片指定区域

    17:14 2016/3/22img只显示图片一部分 或 css设置背景图片只显示图片指定区域 background-position: 100% 56%; 设置背景图片显示图片的哪个坐标区域,图片左 ...

  7. 设置DIV隐藏与显示，表格滑动条

    问题描述:         现在希望使用JS设置DIV块的显示与隐藏,当某一个事件触发是,自动显示DIV块,显示表格数据,但是要求表格显示滑动条 问题解决:   (1)DIV块的隐藏与显示 如上所示, ...

  8. CSS设置DIV边框为圆角，添加背景色溢出的问题

    这么几天需要做一个类似于层级展示的东西,最后一层需要做一些div框来展示数据,我用css设置了div的边框为圆角,但是添加背景色的时候颜色溢出,覆盖了四个角的圆弧,效果如图所示: css代码如下: . ...

  9. CSS设置文本末行显示省略号...

     首先设置文本标签或文字所在标签的宽度   最主要是以下三点:        ①white-space:nowrap;如果是中文需要设置行末不断行       ②overflow:hidden;设置控 ...

随机推荐

  1. 非maven项目导入idea几点心得总结

    这个问题一共有3种解决办法1. 你下载好的文件应该是src 和Webcontent是在同一个目录下的.只要把Webcontent放入到src下就行.这种就变成maven的目录结构.因为你这个目录结构应 ...

  2. android学习之线性布局

    效图如下 移通152余继彪 该布局使用了线性布局完成 父布局为线性布局,黄色和灰色部分为水平的线性布局,剩余50%部分为水平线性布局,该布局中包含了两个垂直的线性布局分别占了三分之1和三分之二

  3. 练习sql语句的好去处——http://www.sqlzoo.cn/

    sql语句的编写需要按照实际的例子来练习. 如果自己来做准备,需要你自己搭好数据库,建好库和表,还要填入数据,最后自己想出题目和正确答案. 不过,现在我发现了一个好去处,http://www.sqlz ...

  4. JAVA 如何把request请求的参数，快速放到model对象中

    因为项目需要,需要从request中读取大量的参数. 因为本人过懒,所以写了个方法把request参数,直接放到对应的类中. 参数 String str="aa,bb,cc"; P ...

  5. CDHtmlDialog的基本使用

    转自:http://blog.csdn.net/sky04/article/details/7587406 因为我的部门只有我一个人(无奈之极,只有我一个做C++的,其他的都在做C#),所以我去跟技术 ...

  6. Tomcat批处理文件小结

    Tomcat批处理文件小结 一:嗯,如果你不了解Windows批处理文件,并且想了解一下,请先参看下面的链接资源(我也是因为想了解一下Windows批处理文件是用什么写的?怎么写的?才在园中找的,下面 ...

  7. Javascript跨域

    跨域:只要协议.域名或端口有任何一个不同,就定义为跨域. CORS(Cross-Origin Resource Sharing):即跨域资源共享.定义了在访问跨域资源时,浏览器和服务器该如何沟通.CO ...

  8. DOM操作 ——如何添加、移除、移动、复制、创建和查找节点等。

    DOM操作 --如何添加.移除.移动.复制.创建和查找节点等. (1)创建新节点 createDocumentFragment() //创建一个DOM片段 createElement() //创建一个 ...

  9. android 代码优化

    http://android.tgbus.com/Android/androidnews/200812/172247.shtml http://blog.163.com/jzq_520/blog/st ...

  10. rails 常用的验证方法 validates （转）

    Agile Web Development with Rails 17.4 validation validate              在save的时候激活validate_on_create  ...