CSS实现兼容性的渐变背景(gradient)效果兼容众多浏览器

发布时间：2013-08-08 16:32:35 作者：佚名

本文就将展示如何实现兼容性的渐变背景效果。在众多的浏览器中，目前不支持Opera浏览器。垂直渐变，起始颜色红色，结束颜色蓝色，结束的蓝色的透明度是0.5，感兴趣的朋友可以了解下

一、有点俗态的开场白

要是两年前，实现“兼容性的渐变效果”这个说法估计不会被提出来的，那个时候，说起渐变背景，想到的多半是IE的渐变滤镜，其他浏览器尚未支持，但是，在对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下含透明度变化红蓝垂直渐变的代码如下：

复制代码

代码如下:

三、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>

四、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>

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

相关代码如下：

复制代码

代码如下:

.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)));
}
<div class="gradient"></div>

---------------------------------------------------------------------
这是我找到的唯一能实现的教程。

Tag：css 渐变背景 gradient

使用CSS实现一个同态效果
这周了解到一个新的名词，同态,同态可以理解成一种特殊形态吧，这篇文章主要为大家详细介绍了如何使用CSS实现这种同态效果，文中的示例代码讲解详细，感兴趣的小伙伴可以了
2024-03-25
CSS实现渐变式圆点加载动画
这篇文章主要为大家详细介绍了如何使用 css3 模拟一个渐变式圆点加载效果，文中的示例代码讲解详细，具有一定的借鉴价值，有需要的小伙伴可以跟随小编一起学习一下
2024-03-22
CSS如何设置背景模糊周边有白色光晕(解决方案)
想要给一个展示图片的区域底部加一个该图片的放大后的背景，并模糊 20，并增加一个黑色 0.6 透明度的遮罩，这篇文章主要介绍了CSS如何设置背景模糊周边有白色光晕(解决方案
2024-03-20
CSS设置水平垂直居中的7种方法
CSS中内容居中的方法有很多种，具体取决于您想要居中的内容是什么类型的元素以及是在什么情况下居中,这篇文章主要为大家整理了常用的7种方法，感兴趣的小伙伴可以跟随小编
2024-03-19
CSS设置style属性的3种方法
style属性可以用在HTML中大部分的标签上，本文主要介绍了CSS设置style属性的3种方法，文中通过示例代码介绍的非常详细，需要的朋友们下面随着小编来一起学习学习吧
2024-03-15
CSS中隐藏元素的常见5种方法
在CSS中隐藏元素有多种方法，这篇文章主要为大家整理了五种常见方法及其适用场景与区别，文中的示例代码讲解详细，具有一定的借鉴价值，有需要的小伙伴可以跟随小编一起学
2024-03-15
CSS实现三栏布局的四种方法
三栏布局是常见的一种页面布局方式，将页面分为左栏、中栏和右栏，这篇文中主要为大家详细介绍了CSS实现三栏布局的四种方法，文中的示例代码讲解详细，感兴趣的小伙伴可以
2024-03-11
使用CSS实现简单的翻页效果
这篇文章主要为大家详细介绍了如何使用CSS实现简单的翻页效果，文中的示例代码讲解详细，具有一定的借鉴价值，有需要的小伙伴可以跟随小编一起学习一下
2024-03-06
使用CSS完成视差滚动效果
在网页设计中，视差滚动效果可以为用户带来沉浸式的浏览体验,这篇文章主要为大家详细介绍了如何使用CSS完成视差滚动效果，文中的示例代码讲解详细，感兴趣的小伙伴可以跟随
2024-02-28
css中position:sticky 粘性定位详解
粘性定位的元素是依赖于用户的滚动，在position:relative与position:fixed定位之间切换，这篇文章给大家介绍css中position:sticky 粘性定位的相关知识，感兴趣的朋友跟随小
2024-02-28