CSS實現兼容性的漸變背景(gradient)效果

本文轉載於:猿2048網站CSS實現兼容性的漸變背景(gradient)效果

IE瀏覽器下的漸變背景

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{ 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); } <div class="gradient"></div>

Firefox瀏覽器下的漸變背景

對於Firefox瀏覽器下(Firefox 3.6+)漸變背景的實現需使用CSS3漸變屬性，-moz-linear-gradient屬性，對於本文開頭提到的要實現的效果的實現能夠參見下面的代碼：

.gradient{ width:300px; height:150px; background:-moz-linear-gradient(top, red, rgba(0, 0, 255, 0.5)); } <div class="gradient"></div>

 

此段代碼在Firefox3.6瀏覽器下的效果是：

chrome/Safari瀏覽器下的漸變背景實現

對於webkit核心的瀏覽器，如Chrome/Safari瀏覽器下漸變背景的實現也是使用CSS3 漸變方法，css-gradient，具體爲-webkit-gradient，使用語Firefox瀏覽器是有一些差別的。具體使用就不詳述了，參見下面的代碼：

.gradient{ width:300px; height:150px; background:-webkit-gradient(linear, 0 0, 0 bottom, from(#ff0000), to(rgba(0, 0, 255, 0.5))); } <div class="gradient"></div>

此段代碼在Safari 4瀏覽器下的效果是：

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

.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; /* 一些不支持背景漸變的瀏覽器 */ 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)); } <div class="gradient"></div>

 

原文地址： http://www.zhangxinxu.com/wordpress/?p=743