注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

左岸

web前端

 
 
 

日志

 
 

CSS实现兼容性的线性渐变背景  

2012-07-06 14:30:01|  分类: css |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

1、先说下CSS3-背景渐变

尽管Mozilla和Webkit通常对CSS3属性采取同样的语法,但是对于渐变,他们很不幸的不能达成一致。

Webkit
Webkit是第一个支持渐变的浏览器内核,它使用下面的结构:

/* 实际用法... */
background: -webkit-gradient(linear, 0 0, 0 100%, from(red), to(blue));

不要担心这些语法会让你看花眼,我也是这样的!只要记得我们需要用一个逗号来隔开这个参数组。

  • 1、渐变的类型(linear)
  • 2、渐变开始的X Y 轴坐标(0 0 – 或者left-top)
  • 3、渐变结束的X Y 轴坐标(0 100% 或者left-bottom)
  • 4、开始的颜色 (from(red))
  • 5、结束的颜色 (to(blue))

Mozilla
Firefox,从3.6版本才开始支持渐变,更喜欢和Webkit略微不同的语法。

/* 实际用法*/
background: -moz-linear-gradient(top, red, blue);

  • 1、请注意我们将渐变的类型——linear——放到了属性前缀中了
  • 2、渐变从哪里开始 (top – 我们也可以使用度数,比如-45deg)
  • 3、开始的颜色 (red)
  • 4、结束的颜色 (blue)

Color-Stops
如果你不需要从一个颜色到另一个颜色的100%渐变怎么办?这就是color stop起作用的时候了。
如果我们想要添加多一种(几种)颜色,我们可以这样做:

background: white; /* 备用属性 */
background: -moz-linear-gradient(top, #dedede, white 8%, red 20%);
background: -webkit-gradient(linear, 0 0, 0 100%, from(#dedede), color-stop(8%, white), color-stop(20%, red));

  • 1、对于-moz 版本,我们定义,从元素的20%的高度的地方开始是红色。
  • 2、而对于-webkit,我们使用color-stop,采用两个参数:哪里开始停止,使用哪种颜色。

2、下面说下IE下解决办法
IE浏览器下渐变背景的使用需要使用IE的渐变滤镜。如下代码:

filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=red,endcolorstr=blue,gradientType=1);

  • 上面的滤镜代码主要有三个参数,依次是:startcolorstr, endcolorstr, 以及gradientType。
  • 其中gradientType=1代表横向渐变,gradientType=0代表纵向淅变。startcolorstr=”色彩” 代表渐变渐变起始的色彩,endcolorstr=”色彩” 代表渐变结尾的色彩。

我们发现图中的渐变是半透明的,所以要用到RGBA颜色

3、简单说下RGBA颜色
所谓RGBA颜色,顾名思意就是red+green+blue+alpha的颜色。我们平时用的较多的是16进制颜色,例如黑色#000000;白色#FFFFFF,这些是16进制表示的颜色,如果使用RGB颜色表示就是rgb(0, 0, 0)与rgb(255,255,255),而RGBA就是多了一个alpha值,这也是实现半透明的关键因素。
对于rgba的使用,您可以参见下面的简单示例:

background:rgba(0, 0, 0, 0.5);

比较可悲的是IE不支持RGBA颜色,这样也可以用滤镜来实现,还是上面说用的滤镜

filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#AARRGGBB,endColorStr=i#AARRGGBB);

我们关心的是这里的颜色表示,即#AARRGGBB,看到这里前面的两个AA字母没,这个就是指rgba中的那个a,也就是透明度的意思,只是与rgba不同的是,这里的AA是要用16进制表示的(非小数值),也就是从00~FF,00表示完全透明了,FF则相当于rgba中1,表示完全不透明实色一个。

现在我们就可以用css3+IE滤镜来改写上面的例子:

#box .maskL{
      position:absolute;  top:0; left:0; height:30px; width:60px;
      background-image:-webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0.5)), to(rgba(255, 255, 255, 0)));
      background-image: -moz-linear-gradient(0deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#9FFFFFFF,endColorstr=#00FFFFFF,gradientType=1);
}
#box .maskR{
       position:absolute;  top:0; right:0;height:30px; width:60px;
       background-image:-webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(rgba(255, 255, 255, 0.5)));
       background-image: -moz-linear-gradient(0deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5));
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#9FFFFFFF,gradientType=1);
}

查看DEMO

参考文章:http://www.qianduan.net/understand-the-css3-gradient.html

提供一个实现css渐变的工具http://www.colorzilla.com/gradient-editor/

  评论这张
 
阅读(1436)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017