image()

image() = image( [ [ <image> | <string> ]? , <color>? ]! )

• 使用媒體片段（media fragments）裁減圖像的部分區(qū)域;

  我們知道假設(shè)是使用背景圖的話，可以通過 background-position 來決定從背景圖的哪個(gè)位置開始顯示

  div { background-image: url(test.png); background-position: 10px 10px; }

  上述代碼會(huì)以圖像 test.png 的 (10,10) 位置作為圓點(diǎn)以進(jìn)行顯示，但如果你只想顯示圖像一部分，就變得有點(diǎn)困難。

  所以之后可以這么做：

  div { background-image: image(test.png#xywh=10,10,20,20); }

  上述代碼會(huì)以圖像 test.png 的 (10,10) 位置作為圓點(diǎn)，截取一個(gè) 20x20 的矩形以進(jìn)行顯示。

• 使用純色作為圖像；

  示例：

  div { background-image: image(black), url(test.png); }

  可以使用 image() 來指定使用純色作為圖像，但此時(shí) background-color 將不再生效，因?yàn)楸尘吧偸窃谒械谋尘皥D之下。

• 當(dāng)指定的圖像不能下載或者正確解碼時(shí)，回退使用純色圖像；

  之前的語(yǔ)法中，有一個(gè)不太恰當(dāng)?shù)膱?chǎng)景與之類似，如下代碼：

  body { background: white; color: black; } div { background: url(black.png) black; color: white; }

  上述代碼能保證當(dāng) black.png 加載失敗，文本也仍然是可讀的，因?yàn)楸患兒谏谋尘疤娲藞D像，所以白色的文本仍然可見。唯一的問題是，如果圖像不是矩形的，或者圖像是半透明的，那么這時(shí)圖像下面的黑色背景會(huì)被看到。

  所以 image() 能更好的解決這個(gè)問題，如下代碼：

  body { background: white; color: black; } div { background: image(black.png, black); color: white; }

  本例的代碼能保證當(dāng)圖像無法加載時(shí)，使用黑色背景替代，并且如果當(dāng)圖像正確加載時(shí)，黑色背景將不渲染，很好的解決了之前例子中存在的問題。

• 在圖像元數(shù)據(jù)中自動(dòng)遵循圖像的定位；

• 淺綠 = 支持
• 紅色 = 不支持
• 粉色 = 部分支持