亚洲欧美一区二区三区日产_ CSS實(shí)現兼容性的漸變背景(gradient)效果

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

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

本文作者為：張?chǎng)涡?來(lái)源于：張?chǎng)涡?鑫空間-鑫生活歡迎訪(fǎng)問(wèn)原出處
二、IE瀏覽器下的漸變背景

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

filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=red,endcolorstr=blue,gradientType=1);

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

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

filter:alpha(opacity=100 finishopacity=0 style=1 startx=0,starty=5,finishx=90,finishy=60)

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

綜合上述，實(shí)現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+)漸變背景的實(shí)現需使用CSS3漸變屬性，-moz-linear-gradient屬性，在之前文章我詳細介紹了Firefox3.6下漸變背景的實(shí)現，您有興趣可以狠狠地點(diǎn)擊這里：CSS漸變之CSS3 gradient在Firefox3.6下的使用。這里我就不再具體講述了，對于本文開(kāi)頭提到的要實(shí)現的效果的實(shí)現可以參見(jiàn)下面的代碼：

.gradient{
width:300px;
height:150px;
background:-moz-linear-gradient(top, red, rgba(0, 0, 255, 0.5));
}

<div class="gradient"></div>

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

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

.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>

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

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

.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)));
}

<div class="gradient"></div>

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

本站僅提供存儲服務(wù)，所有內容均由用戶(hù)發(fā)布，如發(fā)現有害或侵權內容，請點(diǎn)擊舉報。

欧美性猛交XXXX免费看蜜桃,成人网18免费韩国,亚洲国产成人精品区综合,欧美日韩一区二区三区高清不卡,亚洲综合一区二区精品久久