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

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

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

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

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

  所以之后可以這么做：

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

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

• 使用純色作為圖像；

  示例：

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

  可以使用 image() 來指定使用純色作為圖像，但此時 background-color 將不再生效，因為背景色總是在所有的背景圖之下。

• 當指定的圖像不能下載或者正確解碼時，回退使用純色圖像；

  之前的語法中，有一個不太恰當的場景與之類似，如下代碼：

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

  上述代碼能保證當 black.png 加載失敗，文本也仍然是可讀的，因為被純黑色的背景替代了圖像，所以白色的文本仍然可見。唯一的問題是，如果圖像不是矩形的，或者圖像是半透明的，那么這時圖像下面的黑色背景會被看到。

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

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

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

• 在圖像元數據中自動遵循圖像的定位；

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