HTML5 Mobile Web 系列:利用 CSS3 做圖片漸層

可以減少圖片的使用,增加畫面顯示速度。

在設計頁面時,常會利用漸層(gradient)來作一些區塊的背景,雖然可以做一張 1 x n 的漸層圖片,像是這張圖:

再利用 CSS 寫成這樣:
.grad {
height: 50px;
background: url(/path/to/grad.png) repeat-x;
}

就可以產生下述的效果:

這樣除了多使用一張圖片(當然也可以換成 Data URI 來表示)以外,每次想要更換漸層顏色時,就必須另外做一張圖片,但是如果利用 CSS3 的漸層模組便可以直接產生漸層(還不會有圖片失真的問題):
.grad {
height: 50px;
background-image: -webkit-gradient(linear, left top, left bottom, from(#3399ff), to(#66ffff));
}

就能夠產生一樣的效果:

值得注意的是,CSS3 漸層產生的是圖片而不是色彩喔!

這個語法是適用 WebKit 系列的瀏覽器,如果要支援 IE10、Firefox 4 以上的瀏覽器就必須寫成像是這樣(加上 W3C 目前制定的標準語法):
.grad {
height: 50px;
/* IE10 */
background-image: -ms-linear-gradient(top, #3399FF 0%, #66FFFF 100%);
/* Mozilla Firefox */
background-image: -moz-linear-gradient(top, #3399FF 0%, #66FFFF 100%);
/* Opera */
background-image: -o-linear-gradient(top, #3399FF 0%, #66FFFF 100%);
/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, left top, left bottom, from(0, #3399FF), to(1, #66FFFF));
/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(top, #3399FF 0%, #66FFFF 100%);
/* Proposed W3C Markup */
background-image: linear-gradient(top, #3399FF 0%, #66FFFF 100%);
}

當然,為了不支援的瀏覽器,你還是可以再最後面加上原本用圖片顯示漸層的語法,用以相容舊的瀏覽器

這是線性(linear)漸層的語法,其它的 CSS3 漸層產生方式可以參考W3C 的文件,再配合各個瀏覽器的 prefix 作調整囉。