[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快消失啊!!!)