CSS3背景顏色漸變效果

2022-03-06 14:59:01 字數 1710 閱讀 7478

1、firefox瀏覽器:

background-image: -moz-linear-gradient(top , #eef9fe, #d1ecff);

2、safari、chrome瀏覽器:

background-image: -webkit-gradient(linear, 50% 0%, 50% 100%,from(#eef9fe), to(#d1ecff));

3、opera瀏覽器:

background-image: -o-linear-gradient(top , #eef9fe, #d1ecff);

4、ie瀏覽器:

filter: progid:dximagetransform.microsoft.gradient(startcolorstr=#eef9fe,endcolorstr=#d1ecff,gradienttype=1);
注意:其中gradienttype=1代表橫向漸變,gradienttype=0代表縱向淅變。

上面ie瀏覽器**實現的是紅色至藍色的漸變,但是不含透明度變化,這是由於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瀏覽器中要實現既含有透明度又含有漸變的效果的話,css**如下:

filter:alpha(opacity=100 finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=150) 

progid:dximagetransform.microsoft.gradient(startcolorstr=#eef9fe,endcolorstr=#d1ecff,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);

css3 顏色 背景 漸變

漸變放在 css裡的語句 一定要按這個順序排,才不會出錯。否則 有的瀏覽器會不正常,今天本來調好了,發現ie9不行,搞了半天不行,崩潰了 最後準備還是使用背景算了 最後一次 測試,終於搞定 background moz linear gradient top,fefefe,d3ecff moz火狐 ...

CSS3實現背景顏色漸變

css漸變色概念 css漸變色 gradients 能讓我們用一種顏色漸變的效果修飾乙個空間 從一種顏色過渡到另外一種顏色 填充這個空間。漸變色有兩個形式 linear 線性漸變 和radial 環形漸變 很顯然css漸變色 gradients 技術是產生了一種視覺圖案效果,而實現這種視覺效果很簡單...

CSS3實現背景顏色漸變 摘抄

一.webkit瀏覽器 1 第一種寫法 background webkit gradient linear 10 10 100 100 color stop 0.14,rgb 255,0,0 color stop 0.5,rgb 255,255,0 color stop 1,rgb 0,0,255 ...