专栏首页前端知识分享第161天:CSS3实现兼容性的渐变背景(gradient)效果

第161天:CSS3实现兼容性的渐变背景(gradient)效果

CSS实现兼容性的渐变背景(gradient)效果

一、有点俗态的开场白

在对CSS3支持日趋完善的今天,实现兼容性的渐变背景效果已经完全成为可能,本文就将展示如何实现兼容性的渐变背景效果。在众多的浏览器中,目前不支持Opera浏览器。

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

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

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

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背景渐变的用法类似。例如下面的使用:

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下含透明度变化红蓝垂直渐变的代码如下:

.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下的使用 。这里我就不再具体讲述了,对于本文开头提到的要实现的效果的实现可以参见下面的代码:

.gradient{
    width:300px;
    height:150px;
    background:-moz-linear-gradient(top, red, rgba(0, 0, 255, 0.5));  
}

<div class="gradient"></div>

此段代码在Firefox3.6浏览器下的效果是:

四、chrome/Safari浏览器下的渐变背景实现

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

.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>

此段代码在Safari 4浏览器下的效果是:

补充于2011-04-07 Opera11也支持了CSS3渐变。其用法与Firefox一致,需要使用-o-的前缀。另外,Chrome的渐变用法也开始向FireFox浏览器下的用法靠拢。

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

相关代码如下:

.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>

效果分别为上面三个分类的截图。 您可以狠狠地点击这里:兼容性的渐变背景效果demo

六、结语

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 第143天:渐进增强和优雅降级之间的不同

    第一个例子的写法叫做渐进增强(progressive enhancement),第二个例子的写法叫做优雅降级(graceful degradation)。(关于...

    半指温柔乐
  • Web前端面试宝典(最新)

    html语义化让页面的内容结构化,结构更清晰,便于对浏览器、搜索引擎解析;即使在没有样式CSS情况下也以一种文档格式显示,并且是容易阅读的;

    半指温柔乐
  • 第83天:jQuery中操作form表单

    注意:checked、selected、disabled要使用.prop()方法。

    半指温柔乐
  • CSS3渐变,就是这么玩

    HTML5学堂(码匠):渐变背景是一直在页面中常见的元素之一,但是在之前所有的渐变背景都是通过设计师通过图形软件设计出来的背景图。其实这种方法比较麻烦,需要设计...

    HTML5学堂
  • Appium系列|Appium环境搭建(二)

    Android Studio是专门用来开发Android应用的IDE(集成开发环境),类似于其他IDE如Eclipse。有时候需要查看开发源码、编写个A...

    测试邦
  • Flume日志采集系统与Logstash对比

    Flume日志采集系统——初体验(Logstash对比版) 本文就从如下的几个方面讲述下我的使用心得: 初体验——与Logstash的对比 安装部署 启动...

    Albert陈凯
  • 【C#|.NET】lock(this)其实是个坑

    来自 【C#|.NET】lock(this)其实是个坑 这里不考虑分布式或者多台负载均衡的情况只考虑单台机器,多台服务器可以使用分布式锁。出于线程安全的原因,很...

    欢醉
  • Python的项目代码结构

    ZONGLYN
  • Spring|因动态代理使用不注意导致的诡异现象

    笔者在新的定时任务项目中,限定一个类只能写一个Job,类似于写脚本,一个Job一个脚本。对于简单的任务我们并不约定一定要有Service层,但在Job中我们可能...

    Java艺术
  • Linux中的alias命令

    开始写内容之前,简单聊下这个周末吧,这个周末没怎么学习,周六去了趟玉渊潭公园,感觉就是人比樱花多,简直挤爆了。这引发我思考了一个问题:北京的很多...

    AsiaYe

扫码关注云+社区

领取腾讯云代金券