CSS sets DIV background color gradient display_html/css_WEB-ITnose

一、有点俗态的开场白

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

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

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

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

[css]  

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]  

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]  

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

}  

3. Gradient background under Firefox browser

For the implementation of gradient background under Firefox browser (Firefox 3.6), the CSS3 gradient attribute must be used, -moz- Linear-gradient attribute. In the previous article, I introduced the implementation of gradient background in Firefox3.6 in detail. If you are interested, you can click here: CSS Gradient: The use of CSS3 gradient in Firefox3.6. I won’t go into details here. For the implementation of the effects mentioned at the beginning of this article, you can see the following code:

[css]

.gradient{

width:300px;

height:150px;

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

}

4. Under chrome/Safari browser Gradient background implementation

For webkit-core browsers, such as Chrome/Safari, the implementation of gradient background also uses the CSS3 gradient method, css-gradient, specifically -webkit-gradient, using the Firefox browser There are some differences. I gave a very detailed introduction to this in my previous article. You can click here: CSS gradient for use in webkit core browsers. The specific use will not be described in detail, see the following code:

[css]

.gradient{

width:300px;

height:150px ;

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

}

Supplemented on 2011-04-07

Opera11 also supports CSS3 gradients. Its usage is consistent with Firefox and requires the -o- prefix. In addition, Chrome's gradient usage has begun to move closer to the usage under FireFox browser.

5. Comprehensive? Compatible gradient background effect

The relevant code is as follows:

[css]

.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; /* Some do not support backgrounds Gradient browser*/

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

}

6. Conclusion

The potential of CSS3 is very great. Gradient can create many exquisite UI effects. In the past, these effects could only be achieved using images. The implementation of CSS gradient background can effectively reduce the number of images on the web page, which also reduces HTTP requests, which is very useful. But the IE browser has been squatting by the toilet eating chicken legs?? It thinks it is delicious, so it has to use a very resource-intensive filter to achieve the gradient effect. Therefore, for now, the application of gradient background still needs to be weighed.