css3實現(xiàn)背景顏色漸變讓圖片不再是唯一的實現(xiàn)方式

發(fā)布時間：2012-12-18 15:17:14 作者：佚名

對于網頁設計師而言，顏色漸變在網頁設計中十分常見，而對于網頁制作者來說，通常的方法就是把漸變切成圖片來實現(xiàn)。伴隨著css3的出現(xiàn)，實現(xiàn)背景顏色漸變，圖片不再是唯一的實現(xiàn)方式,在這里面，我分別就這兩種內核的瀏覽器進行講解

縱向漸變：

復制代碼

代碼如下:

橫向漸變：

復制代碼

代碼如下:

默認縱向漸變顏色：

復制代碼

代碼如下:

對于網頁設計師而言，顏色漸變在網頁設計中十分常見，而對于網頁制作者來說，通常的方法就是把漸變切成圖片來實現(xiàn)。伴隨著css3的出現(xiàn)，實現(xiàn)背景顏色漸變，圖片不再是唯一的實現(xiàn)方式。雖然IE瀏覽器還沒有實現(xiàn)，但Mozilla和webkit內核的瀏覽器已經接受了這一實現(xiàn)方式。在這里面，我分別就這兩種內核的瀏覽器進行講解。
一、以firefox為代表的mozilla內核的瀏覽器（注意，以下的圖請有firefox瀏覽器下查看）
firefox的linear gradient（線性漸變）的幾點說明：
1）基本語法：

復制代碼

代碼如下:

background-image:-moz-linear-gradient(
[<point>||<angle>],
開始顏色值，
結束顏色值，
[(停靠顏色值，偏移量百分數(shù)),...]
);

1、-moz-linear-gradient是background的一個屬性值；
2、它的第一組參數(shù)<角度位置>非常靈活，他的基本組成點位<point>(漸變的出發(fā)點)和角度，它可以被指定為一個百分比，像素，或者使用”left”，”center”，”right”的水平和”top”、”center”、”buttom”的垂直定位。位置從最愛影響的元素左上角開始。如果只在水平漸變的話，只要設置：”left center”或”right center”，如果垂直漸變的話，設置為”center top”或者”center bottom”。firefox下可以省略掉center。

復制代碼

代碼如下:

background-image:-moz-linear-gradient(left center,#fff800,#f60);
background-image:-moz-linear-gradient(right center,#fff800,#f60);
background-image:-moz-linear-gradient(top,#fff800,#f60);

3、如果這兩個值是百分比的值的話，那么第一個是水平漸變位置，第二個是垂直漸變位置，這個時間還需要一個角度值，比如“90deg”，你也可以隨意改動大小來查看顯示結果。

復制代碼

代碼如下:

background-image:-moz-linear-gradient(180deg,#fff800,#f60);
background-image:-moz-linear-gradient(0deg,#fff800,#f60);
background-image: -moz-linear-gradient(left, red, orange, yellow, green, blue);

二、以chrome為代表的webkit內核的瀏覽器（注意，以下的圖請在chrome瀏覽器下查看）
webkit內核的瀏覽器有safai、chrome的linear gradient（線性漸變）的幾點說明：
1）基本語法：

復制代碼

代碼如下:

background-image:-webkit-gradient(
type,
x1,
y1,
x2,
y2,
from(開始顏色值),
to(結果顏色值)，
[color-stop(偏移量小數(shù)，?？款伾?,...]
);-webkit-gradient(
type,
start_point,
end_point,
stop...
)

參數(shù)類型簡要說明
type 漸變的類型，分為線性漸變（linear）和徑向漸變（radial）
start_point 漸變圖片中漸變的起始點
end_point 漸變圖像中漸變的結束點
stop color-stop()方法，指定漸變進程中特定的顏色
inner_center 內部中心點，徑向漸變起始圓環(huán)
inner_radius 內部半徑，徑向漸變起始圓
outer_center 外部漸變結束圓的中心點
outer_radius 外部漸變結束圓的半徑
1、start_point(x1,y1)，end_point(x2,y2)，這里的x,y對應左上角為起點的坐標，此處的x,y參數(shù)表示與css中的background-position是一致的，可以使用像素、百分比或者left,top,right,bottom。
當x1 = x2，y1 ≠ y2，實現(xiàn)垂直漸變，調整y1，y2的值可以調整漸變半徑大??；
bbackground-image:-webkit-gradient(linear,0% 0%, 0% 100%, from(#fff800), to(#f60));
當y1 = y2，x1 ≠ x2，實現(xiàn)水平漸變，調整x1，x2的值可以調整漸變半徑大??；
bbackground-image:-webkit-gradient(linear,0% 0%, 100% 0%, from(#fff800), to(#f60));
當y1 ≠ y2，x1 ≠ x2，實現(xiàn)角度漸變，當x1，x2，y1，y2取值為極值的時候接近垂直漸變或水平漸變；
bbackground-image:-webkit-gradient(linear,10% 30%, 100% 100%, from(#fff800), to(#f60));
當x1=x2，y1=y2，沒有漸變。
2、color-stop是一個過渡點，相當于ps里面，多添加一個漸變的點，有兩個參數(shù)，一個是點的位置，另外一個是過渡點的顏色。
background-image:-webkit-gradient(linear,0% 0%, 100% 0%, from(#fff800), to(#f60),color-stop(20%,#fff));
background-image:-webkit-gradient(linear,0% 0%, 100% 0%, from(#fff800), to(#fff),color-stop(20%,#fff),color-stop(20%,#f60));
3、創(chuàng)建徑向漸變
background-image:-webkit-gradient(radial, 45 45, 10, 52 50, 30, from(#fff800), to(#f60), color-stop(90%, #c00));
轉載請注明本文鏈接：http://www.rainleaves.com/html/1214.html
由 lyhydfp 發(fā)表在 html5+css3分類目錄，并貼了 css3、linear gradient、背景線性漸變標簽。
IE瀏覽器下漸變設置方法：

復制代碼

代碼如下:

/* IE瀏覽器 */
background-image:filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4477a1', endColorstr='#81a8cb'); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#4477a1', endColorstr='#81a8cb')"; /* IE8 */