Compass image-sprite + linear-gradient

No

Compass 威力強大,有時一個了解的概念實際要運用時常常會卡住不知該怎麼下手,下了手又可能因為少了括號之類的符號而爛掉..,好吧,承認後面這個原因是自己不會寫程式的不足所造成 XD,總之這邊提供 Compass image-sprite + linear-gradient 的寫法,以後忘了怎麼寫時自己還可以查詢一下。話說這是 hlb 提醒的寫法,Compass 網站也有類似技法,只是不包含 image-sprite。

css3 本來就加入了 multiple backgrounds 的功能,讓一個 html 標籤上可以有多組圖層:

1
background: url(bg-header.png) left top repeat-x, url(bg.png) center top no-repeat:

每組背景以逗號隔開,此時呈現出來的背景會是 bg-header.png 在上面,bg.png 在下面,也就是要放在上方的圖層要寫在前頭。以下分別是 compass 對於 image-sprite 與 linear-gradient 的寫法:

1
background: sprite($icon-sprite, close) no-repeat;
1
@include background-image(linear-gradient(#333, #000));

兩組合併寫時,icon 要放上方背景則是漸層,寫法就會是:

1
@include background(sprite($icon-sprite, close) no-repeat, linear-gradient(#333, #000));

Friday, January 13th, 2012

Category: CSS, Compass, Tutorials

Bookmark and Share