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

本文地址： http://www.zhangxinxu.com/wordpress/?p=743

一、有点俗态的开场白

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

.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浏览器一直蹲在茅厕边啃鸡腿——自以为美味，得使用资源消耗很高的滤镜才能实现渐变效果。所以，目前而言，渐变背景的的应用与否还是有待于利弊权衡的。

如果您发现文章中有表述不准确或是有相关问题需要交流可以通过评论或是去这里进行提问交流。
原创文章，转载请注明来自张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com]
本文地址： http://www.zhangxinxu.com/wordpress/?p=743

.multibackground_transparent { background: -moz-linear-gradient(right, rgba(255,255,255,0), rgba(255,255,255,1)),url(http://demos.hacks.mozilla.org/openweb/resources/images/patterns/flowers-pattern.jpg);}

by zhangxinxu from http://www.zhangxinxu.com
本文地址：http://www.zhangxinxu.com/wordpress/?p=727

原文地址： http://hacks.mozilla.org/2009/11/css-gradients-firefox-36/
原文作者： Alix Franquet
翻译作者： 张鑫旭

一、引子

Firefox3.6包含了许多CSS的改进，本文将向您展示如果使用CSS渐变。

如果你正在运行的Firefox 3.6的最新测试版，你应该看看我们的互动演示，并查看相应的代码。使用单选按钮来切换不同的样式选项。

二、含CSS渐变的背景(backgrounds)

背景使用CSS渐变显示可以不使用图像就实现两个或两个以上的指定颜色的平滑过渡。这反过来又减少了下载时间和带宽的使用，放大时也比较好看，可以让您创造出一个更灵活的布局。

Firefox支持两种类型的CSS渐变：线性的(-moz-linear-gradient)和放射状的(-moz-radial-gradient)。

三、线性渐变(Linear Gradients)

要创建一个线性渐变，您需要设置一个起点和一个渐变的方向（或角度），并定义起止颜色。

 -moz-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )

起始点(Starting Point)：起点的工作方式类似于background position。您可以设置水平和垂直位置为百分比，或以像素为单位，或在水平方向上可以使用left/center/right，在垂直方向上可以使用top/center/bottom。位置起始于左上角。如果你不指定水平或垂直位置，它将默认为center。

例如，这里是一个线性渐变，开始于center（水平发现）和top（垂直发现），并从蓝色到白色。

.linear_gradient_square {
  width: 100px;
  height: 100px;
  border: 1px solid #333;
  background: -moz-linear-gradient(top, blue, white);
}

或者是起始于left（horizontal）和center（vertical）

vertical为默认的 center

background: -moz-linear-gradient(left, blue, white);

或者是起始于left（horizontal）和top（vertical）

horizontal和vertical都指定了

background: -moz-linear-gradient(left top, blue, white);

角度(Angle)：正如您在上面看到的，如果您不指定（specify）一个角度，它会根据起始位置自动定义。如果你想更多的控制渐变的方向，您也设置角度。

例如，下面的两个渐变具有相同的起点left center，但是右手边的有一个20度的角度（an angle of 20 degrees）。

background: -moz-linear-gradient(left 20deg, black, white);

当指定的角度，请记住，它是一个由水平线（horizontal line）与渐变线（gradient line）产生的的角度，逆时针方向（counter-clockwise）。因此，使用0deg将产生一个左到右横向梯度，而90度将创建一个从底部到顶部的垂直渐变。

    background: -moz-linear-gradient(<angle>, red, white);

起止颜色(Color Stops)：除了起始位置position和角度angle，你应该指定起止颜色color stops。起止颜色是沿着渐变线，将会在指定位置（以百分比或长度设定）含有指定颜色的点。色彩的起止数是无限的。如果您使用一个百分比位置，0％代表起点和100％是终点，但区域外的值可以被用来达到预期的效果。

下面是一个简单的例子，三个起止颜色。因为第一个和最后的颜色并未指定颜色点，他们将显示为默认的0％和100％。

background : -moz-linear-gradient ( top , blue , white 80% , orange ) ;

如果没有指定位置，颜色会均匀分布。Colors will be evenly spacedif no position is specified.

background: -moz-linear-gradient(left, red, orange, yellow, green, blue);

透明度(Transparency)：还支持透明渐变。这是相当有用的，例如，当堆叠多个背景时when stacking multiple backgrounds.。这里是两个背景的结合：一张图片，一个白色到透明的线性渐变。

.multibackground_transparent {
    background: -moz-linear-gradient(right, rgba(255,255,255,0), rgba(255,255,255,1)), url(http://demos.hacks.mozilla.org/openweb/resources/images/patterns/flowers-pattern.jpg);
}

四、径向渐变(Radial Gradients)

为径向渐变的语法非常类似于线性渐变。

 -moz-radial-gradient([<bg-position> || <angle>,]? [<shape> || <size>,]? <color-stop>, <color-stop>[, <color-stop>]*);

除了您已经在线性渐变中看到的起始位置，方向，和颜色，径向梯度允许你指定渐变的形状（圆形或椭圆形）和大小（最近端，最近角，最远端，最远角，包含或覆盖 (closest-side, closest-corner, farthest-side, farthest-corner, contain or cover)）。

颜色起止(Color stops)：就像用线性渐变，你应该沿着渐变线定义渐变的起止颜色。下面的圆具有相同的起止颜色，但在左边的为默认的颜色间隔均匀的渐变，而右边的每种颜色都有特定的位置。

background: -moz-radial-gradient(red, yellow, #1E90FF);
 background: -moz-radial-gradient(red 5%, yellow 25%, #1E90FF 50%);

形状(Shape)：在这里你可以看到两个可能的形状间的差异，一个圆（左侧）和椭圆（右侧），两者都起始于bottom left：

.radial_gradient_circle {
    background: -moz-radial-gradient(bottom left, circle, red, yellow, #1E90FF);
}
 .radial_gradient_ellipse {
    background: -moz-radial-gradient(bottom left, ellipse, red, yellow, #1E90FF);
}

大小(Size)：size的不同选项(closest-side, closest-corner, farthest-side, farthest-corner, contain or cover)指向被用来定义圆或椭圆大小的点。

示例：椭圆的近边closest-sizeVS远角farthest-corner
下面的两个椭圆有不同的大小。左边的一个是由从起始点(center)到近边的距离设定的，而右边的一个是由从起始点到远角的的距离决定的。

  background: -moz-radial-gradient(ellipse closest-side, red, yellow 10%, #1E90FF 50%, white);
  background: -moz-radial-gradient(ellipse farthest-corner, red, yellow 10%, #1E90FF 50%, white);

示例：圆的近边closest-sideVS远边farthest-side
左边的圆的渐变大小由起始点(center)到近边的距离决定，而右边的圆则有起始点到远边的距离决定。

 background: -moz-radial-gradient(circle closest-side, red, yellow 10%, #1E90FF 50%, white);
 background: -moz-radial-gradient(circle farthest-side, red, yellow 10%, #1E90FF 50%, white);

示例：包含圆cintained circle
在这里你可以看到左侧的默认圈，同一渐变版本，但是被包含的右边的圆。

 background: -moz-radial-gradient(red, yellow, #1E90FF);
 background: -moz-radial-gradient(contain, red, yellow, #1E90FF);

五、重复渐变(Repeating Gradients)

如果您想重复一个渐变，您可以使用-moz-repeating-linear-gradient和-moz-repeating-radial-gradient。

在下面的例子，每个实例都指定了四个起止颜色，并无限重复。

 .repeating_radial_gradient_example {
    background: -moz-repeating-radial-gradient(black, black 5px, white 5px, white 10px);
}
 .repeating_linear_gradient_example {
     background: -moz-repeating-linear-gradient(top left -45deg, red, red 5px, white 5px, white 10px);
}

Demo
您可以查看线性和径向渐变demo获取更多示例