CSS實現相容性的漸變背景 gradient 效果

要是兩年前，實現「相容性的漸變效果」這個說法估計不會被提出來的，那個時候，說起漸變背景，想到的多半是ie的漸變濾鏡，其他瀏覽器尚未支援，但是，在對css3支援日趨完善的今天，實現相容性的漸變背景效果已經完全成為可能，本文就將展示如何實現相容性的漸變背景效果。在眾多的瀏覽器中，目前不支援opera瀏覽器。

本文例項效果都是同樣的效果，就是垂直漸變，起始顏色紅色，結束顏色藍色，結束的藍色的透明度是0.5。

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

結果如下圖：

對於firefox瀏覽器下(firefox 3.6+)漸變背景的實現需使用css3漸變屬性，-moz-linear-gradient屬性，在之前文章我詳細介紹了firefox3.6下漸變背景的實現，您有興趣可以狠狠地點選這裡：css漸變之css3 gradient在firefox3.6下的使用。這裡我就不再具體講述了，對於本文開頭提到的要實現的效果的實現可以參見下面的**：

.gradient

此段**在firefox3.6瀏覽器下的效果是：

此段**在safari 4瀏覽器下的效果是：

補充於2011-04-07

opera11也支援了css3漸變。其用法與firefox一致，需要使用-o-的字首。另外，chrome的漸變用法也開始向firefox瀏覽器下的用法靠攏。

.gradient

效果分別為上面三個分類的截圖。

您可以狠狠地點選這裡：相容性的漸變背景效果demo

css3的潛力非常的大，就漸變這一塊可以建立很多精湛的ui效果，而以往這些效果都只能使用實現。css漸變背景的實現可以有效降低網頁的數，也就是降低了http請求，是非常受用的。但是ie瀏覽器一直蹲在茅廁邊啃雞腿——自以為美味，得使用資源消耗很高的濾鏡才能實現漸變效果。所以，目前而言，漸變背景的的應用與否還是有待於利弊權衡的。

CSS實現相容性的漸變背景 gradient 效果

CSS實現相容性的漸變背景 gr

CSS3實現相容性的漸變背景效果

css樣式實現背景色的漸變效果及相容性

CSS實現相容性的漸變背景 gradient 效果

CSS實現相容性的漸變背景 gr

CSS3實現相容性的漸變背景效果

css樣式實現 背景色的漸變效果及相容性

相關推薦

css樣式實現背景色的漸變效果及相容性