css 背景色渐变---和背景色透明

1 背景色渐变

　

 　　background:#fb0000;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fb0000), color-stop(15%,#d50000), color-stop(75%,#c70000), color-stop(100%,#b20000));
    background: -webkit-linear-gradient(top,   #fb0000 0%,#d50000 15%,#c70000 75%,#b20000  100%);
    background: linear-gradient(to bottom,  #fb0000 0%,#d50000 15%,#c70000 75%,#b20000 100%);

 

2 背景色 透明

{  
      filter:alpha(opacity=50);  
      -moz-opacity:0.5;  
      -khtml-opacity: 0.5;  
      opacity: 0.5;  
}   

还有背景色rgb的最后一个变量是可以控制透明度的。

{
   background:rgb(207,0,0,0.8);
}

 

3 ie渐变

参考网址：http://www.qttc.net/201304316.html；

CSS3新加特性gradient可以实现背景颜色，鉴于各浏览器之间还有兼容性因此这里只说线性渐变，其它渐变就算是有也不敢贸然使用。

Mozilla

仅针对FireFox

background: -moz-linear-gradient(top, #eee, #aaa);

linear 表示线性，参数top表示从顶部开始，参数#eee表示开始颜色，#aaa表示结束颜色

效果：

Webkit

解决：Chrome 、Safari

background: -webkit-gradient(linear, 0 0, 0 100%, from(#eee), to(#aaa));

 

linear 表示线性、0 0 表示开始位置的x与y的位置，0 100%表示结束的x与y位置，from(#eee)表示从这个颜色开始，to(#aaa)表示渐变到这个颜色

Chrome：

Safari：

Opera

代码：

 

background: -o-linear-gradient(top, #eee, #aaa);

 

同Mozilla一样用法，只不过前缀-moz修改成-o即可

效果：

IE9 and IE 10

代码：

background: -ms-linear-gradient(#eeeeee 0%,#aaaaaa 100%);

 

#eeeeee 0% 表示从什么颜色位置开始，#aaaaaa 100%表示到什么颜色以及结束位置

IE9：

IE10：

IE7 and IE8

这个两个浏览器使用的事滤镜，跟CSS3没有半毛关系，只不过能在低端IE中解决这个问题也是解决兼容的一个做法，但注意不要大量使用，耗资源！

IE7代码：

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee',endColorstr='#aaaaaa',grandientType=1);

 

startColorstr开始颜色，endColorstr结束颜色，grandientType渐变方向

IE7效果：

IE8代码：

-ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee',endColorstr='#aaaaaa',grandientType=1);

 

参数同IE7类似，只不过在filter加了一个-ms-前缀

IE8效果：

整合兼容

我们把各个浏览器的背景颜色渐变都写上就解决各浏览器间的背景颜色渐变了

background: -webkit-gradient(linear, 0 0, 0 100%, from(#eee), to(#aaa)); /** Chrome Safari **/
background: -moz-linear-gradient(top, #eee, #aaa); /** FireFox **/
background: -o-linear-gradient(top, #eee, #aaa);  /** Opear **/
background: -ms-linear-gradient(#eeeeee 0%,#aaaaaa 100%);  /** IE9 IE10 **/
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee',endColorstr='#aaaaaa',grandientType=1); /** IE7 **/
-ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee',endColorstr='#aaaaaa',grandientType=1); /** IE8 **/

 

但为了要一个通用的背景渐变要写六行代码，不见得比图片省事，要么也可以结合后端语言做一个功能，输入渐变的起始颜色与结束颜色后生成以上代码。