2011年3月1日 星期二

[CSS3 Minefield] CSS3 Background and Border #1 - Multiple Background

寫完一些長文接下來會把一些本質上很零碎的spec分成幾個短篇寫-這次是已經是CR的CSS3 Background and Border [w3c spec]

今天的主題是當中最多人感興趣(也最雷)的Multiple Background

[前言]
CSS3 Multiple Background,正名是Layering multiple background images,其中一個最實用的CSS3 feature-簡單來說就是你可以把background分layer(圖層),一層疊一層。每個layer可以有該element的width & height,而且同一時間有完整的background屬性(attachment & repeat, etc),以往要用N個div做的事情只需要一個div就可以了!

而且這是除了舊版IE外幾乎全部新版Browser都Support的屬性 [reference]

[Syntax]
  • 一如眾多CSS3 multiple value屬性,以comma分隔background
  • 常用的是用在background上,每個Layer用一句background shorthand描述:
    background: url(body-top.gif) top left no-repeat,
    url(banner_fresco.jpg) top 11px no-repeat,
    url(body-bottom.gif) bottom left no-repeat,
    url(body-middle.gif) left repeat-y;
    [source: CSS3.info]

     不過其他相關屬性^也可以用這種寫法指定對應相應的圖層的值
    background-image: url(flower.png), url(ball.png), url(grass1.png);
    background-position: center center, 20% 80%, top left;
    background-origin: border-box, content-box, border-box;
    background-repeat: no-repeat, no-repeat, no-repeat
    [source: w3c spec, example I]
    *粗體是Spec容許省略的地方,不過個人不建議...
    ^background-color除外,見注意事項
[重要事項]
Ordering (次序)
因為是Layer,次序絕對有差。
你必須當自己在用Photoshop一類圖像軟件...然而,這東西的地雷位是在...

那個次序是照CSS解析順序(右至左)而非自然list順序(左至右)

..也就是說:

background出現的順序是倒序最後一個值最先套用(apply),也就是最底層....

圖像化解說如下:
[警告: 現實不能這樣寫,用顏色只是個比喻...]


即是說:

background: 0*, 1*, 2* → 實際出現的順序是 2*, 1*, 0* -2*在最底 0*在最高
(* = 一個valid的background shorthand)

background-color
不能亂用的東西。當其他background shorthand有非transparent color (rgba也是,只得color也是) 一律會把background無效化[Demo]
不過有以下情形例外:
  • color出現在最後一個background value中 (最底層) [Demo]
  • 另外單設background-color:這倒是不影響,而且會如實的成為背景色

CSS3 gradient
CSS3 gradient本身是可以作為background-image的value,所以是可以套在multiple background上! [Demo]
[延申閱讀: MULTIPLE BACKGROUNDS AND CSS GRADIENTS]

none
說來微妙,就算list內有"none"這個值 (background: ..., none, ...) 也是會生出Layer出來的....
也許可以配合:hover搞些效果? (當成卡位用的value?)

[fallback]
要Fallback IE 6/7/8是超簡單的:
先設一個支援舊版、沒multiple background的background,再之後declare有multiple background的background
/* For all UAs: */
background: silver;
/* For UAs that do fixed backgrounds: */
background: url(stripe.png) fixed, white url(ledger.png) fixed;
[w3c example VII]
有multiple background的那個style會被古老的browser們忽略,新版的會override
(p.s.上例mobile safari會應會無視第二個style,不過那是因為fixed...)

[結語]
最雷的CSS3屬性之一,不過真的滿好用就是...(再說一次,舊版IE快消失啊!!!)

沒有留言:

張貼留言