css 背景色漸變---和背景色透明 - xiaoxiao2014 @ IT工程師數位筆記本

文章出處

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 **/