一、有點(diǎn)俗態(tài)的開場(chǎng)白

要是兩年前，實(shí)現(xiàn)“兼容性的漸變效果”這個(gè)說法估計(jì)不會(huì)被提出來的，那個(gè)時(shí)候，說起漸變背景，想到的多半是IE的漸變?yōu)V鏡，其他瀏覽器尚未支持，但是，在對(duì)CSS3支持日趨完善的今天，實(shí)現(xiàn)兼容性的漸變背景效果已經(jīng)完全成為可能，本文就將展示如何實(shí)現(xiàn)兼容性的漸變背景效果。在眾多的瀏覽器中，目前不支持Opera瀏覽器。

本文實(shí)例效果都是同樣的效果，就是垂直漸變，起始顏色紅色，結(jié)束顏色藍(lán)色，結(jié)束的藍(lán)色的透明度是0.5。 

二、IE瀏覽器下的漸變背景

IE瀏覽器下漸變背景的使用需要使用IE的漸變?yōu)V鏡。如下代碼：


相關(guān)說明：
上面的濾鏡代碼主要有三個(gè)參數(shù)，依次是：startcolorstr, endcolorstr, 以及gradientType。
其中g(shù)radientType=1代表橫向漸變，gradientType=0代表縱向淅變。startcolorstr=”色彩” 代表漸變漸變起始的色彩，endcolorstr=”色彩” 代表漸變結(jié)尾的色彩。

上面代碼實(shí)現(xiàn)的是紅色至藍(lán)色的漸變，但是不含透明度變化，這是由于IE目前尚未支持opacity屬性以及RGBA顏色，要實(shí)現(xiàn)IE下的透明度變化，還是需要使用IE濾鏡，IE的透明度濾鏡功能比較強(qiáng)大，這種強(qiáng)大反而與Firefox或是Safari瀏覽器下的css-gradient背景漸變的用法類似。例如下面的使用：


其中各個(gè)參數(shù)的含義如下：
opacity表示透明度，默認(rèn)的范圍是從0 到 100，他們其實(shí)是百分比的形式。也就是說，0代表完全透明，100代表完全不透明。
finishopacity 是一個(gè)可選參數(shù)，如果想要設(shè)置漸變的透明效果，就可以使用他們來指定結(jié)束時(shí)的透明度。范圍也是0 到 100。
style用來指定透明區(qū)域的形狀特征：
0 代表統(tǒng)一形狀
1 代表線形
2 代表放射狀
3 代表矩形。
startx 漸變透明效果開始處的 X坐標(biāo)。
starty 漸變透明效果開始處的 Y坐標(biāo)。
finishx 漸變透明效果結(jié)束處的 X坐標(biāo)。
finishy 漸變透明效果結(jié)束處的 Y坐標(biāo)。

綜合上述，實(shí)現(xiàn)IE下含透明度變化紅藍(lán)垂直漸變的代碼如下：


三、Firefox瀏覽器下的漸變背景

對(duì)于Firefox瀏覽器下(Firefox 3.6+)漸變背景的實(shí)現(xiàn)需使用CSS3漸變屬性，-moz-linear-gradient屬性，在之前文章我詳細(xì)介紹了Firefox3.6下漸變背景的實(shí)現(xiàn)，您有興趣可以狠狠地點(diǎn)擊這里：CSS漸變之CSS3 gradient在Firefox3.6下的使用 。這里我就不再具體講述了，對(duì)于本文開頭提到的要實(shí)現(xiàn)的效果的實(shí)現(xiàn)可以參見下面的代碼：


四、chrome/Safari瀏覽器下的漸變背景實(shí)現(xiàn)

對(duì)于webkit核心的瀏覽器，如Chrome/Safari瀏覽器下漸變背景的實(shí)現(xiàn)也是使用CSS3 漸變方法，css-gradient，具體為-webkit-gradient，使用語Firefox瀏覽器是有一些差異的。我在上上一篇文章對(duì)此進(jìn)行了非常詳細(xì)的介紹，您可以狠狠地點(diǎn)擊這里：CSS gradient漸變之webkit核心瀏覽器下的使用 。具體使用就不詳述了，參見下面的代碼：


五、綜合 – 兼容性的漸變背景效果

相關(guān)代碼如下：


---------------------------------------------------------------------
這是我找到的唯一能實(shí)現(xiàn)的教程。

最新評(píng)論