CSS3教程

当前位置: HTML5技术网 > CSS3教程 > CSS设置DIV背景色渐变显示

CSS设置DIV背景色渐变显示

  1. <style type="text/css">   

  2.     .linear{   

  3.         width:100%;   

  4.         height:600px;   

  5.         FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#b8c4cb,endColorStr=#f6f6f8); /*IE 6 7 8*/   

  6.         background: -ms-linear-gradient(top, #fff,  #0000ff);        /* IE 10 */  

  7.         background:-moz-linear-gradient(top,#b8c4cb,#f6f6f8);/*火狐*/   

  8.         background:-webkit-gradient(linear, 0% 0%, 0% 100%,from(#b8c4cb), to(#f6f6f8));/*谷歌*/   

  9.         background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#0000ff));      /* Safari 4-5, Chrome 1-9*/  

  10.         background: -webkit-linear-gradient(top, #fff, #0000ff);   /*Safari5.1 Chrome 10+*/  

  11.         background: -o-linear-gradient(top, #fff, #0000ff);  /*Opera 11.10+*/  

  12.     }   

  13. </style>   

  14.   

  15. <body>  

  16.     <div class="linear"></div>  

  17. </body>
复制代码
一、有点俗态的开场白


      要是两年前,实现“兼容性的渐变效果”这个说法估计不会被提出来的,那个时候,说起渐变背景,想到的多半是IE的渐变滤镜,其他浏览器尚未支持,但是,在对CSS3支持日趋完善的今天,实现兼容性的渐变背景效果已经完全成为可能,本文就将展示如何实现兼容性的渐变背景效果。

      本文实例效果都是同样的效果,就是垂直渐变,起始颜色红色,结束颜色蓝色,结束的蓝色的透明度是0.5。

二、IE浏览器下的渐变背景

      IE浏览器下渐变背景的使用需要使用IE的渐变滤镜。如下代码:

[css]  
  1. 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]  
  1. 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]  

  1. .gradient{  

  2.     width:300px;  

  3.     height:150px;  

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

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

  6. }  

  7. <div class="gradient"></div>  
复制代码
      三、Firefox浏览器下的渐变背景

      对于Firefox浏览器下(Firefox 3.6+)渐变背景的实现需使用CSS3渐变属性,-moz-linear-gradient属性,在之前文章我详细介绍了Firefox3.6下渐变背景的实现,您有兴趣可以狠狠地点击这里:CSS渐变之CSS3 gradient在Firefox3.6下的使用 。这里我就不再具体讲述了,对于本文开头提到的要实现的效果的实现可以参见下面的代码:

[css]  
  1. .gradient{  

  2.     width:300px;  

  3.     height:150px;  

  4.     background:-moz-linear-gradient(top, red, rgba(0, 0, 255, 0.5));   

  5. }

  6. <div class="gradient"></div>  
复制代码
四、chrome/Safari浏览器下的渐变背景实现

      对于webkit核心的浏览器,如Chrome/Safari浏览器下渐变背景的实现也是使用CSS3 渐变方法,css-gradient,具体为-webkit-gradient,使用语Firefox浏览器是有一些差异的。我在上上一篇文章对此进行了非常详细的介绍,您可以狠狠地点击这里:CSS gradient渐变之webkit核心浏览器下的使用 。具体使用就不详述了,参见下面的代码:

[css]  

  1. .gradient{  

  2.     width:300px;  

  3.     height:150px;  

  4.     background:-webkit-gradient(linear, 0 0, 0 bottom, from(#ff0000), to(rgba(0, 0, 255, 0.5)));   

  5. }  

  6. <div class="gradient"></div>  
复制代码
      Opera11也支持了CSS3渐变。其用法与Firefox一致,需要使用-o-的前缀。另外,Chrome的渐变用法也开始向FireFox浏览器下的用法靠拢。

五、综合 – 兼容性的渐变背景效果

      相关代码如下:

[css]  

  1. .gradient{  

  2.     width:300px;  

  3.     height:150px;  

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

  5.     -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*/      

  6.     background:red; /* 一些不支持背景渐变的浏览器 */   

  7.     background:-moz-linear-gradient(top, red, rgba(0, 0, 255, 0.5));   

  8.     background:-webkit-gradient(linear, 0 0, 0 bottom, from(#ff0000), to(rgba(0, 0, 255, 0.5)));   

  9.     background:-o-linear-gradient(top, red, rgba(0, 0, 255, 0.5));   

  10. }  

  11. <div class="gradient"></div>
复制代码
六、结语

      CSS3的潜力非常的大,就渐变这一块可以创建很多精湛的UI效果,而以往这些效果都只能使用图片实现。CSS渐变背景的实现可以有效降低网页的图片数,也就是降低了HTTP请求,是非常受用的。但是IE浏览器一直蹲在茅厕边啃鸡腿——自以为美味,得使用资源消耗很高的滤镜才能实现渐变效果。所以,目前而言,渐变背景的的应用与否还是有待于利弊权衡的。

via:http://www.cnblogs.com/xiaochao1 ... /12/17/4166377.html

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

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

2. 一款纯css3实现的颜色渐变按钮

3. CSS3系列教程:背景图片(背景大小和多背景图)

4. CSS 设置鼠标显示形状

5. CSS3边框背景-边框背景(-border-image)

6. 14个最佳的HTML/CSS设计和开发框架

7. HTML教程:如何设置Iframe自适应高度

8. 用iOS设备控制的HTML5“小蜜蜂”游戏

9. CSS3线性渐变教程

10. CSS渐变色效果的实现方法与效果演示

本文来源:https://www.51html5.com/a1064.html

点击展开全部

﹝CSS设置DIV背景色渐变显示﹞相关内容

「CSS设置DIV背景色渐变显示」相关专题

其它栏目

也许您还喜欢