image()

語法:

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

說明:

image() 用於指定圖片或者圖片替代。允許作者這樣做:
  • 使用媒體片段(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; }

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

  • 在圖片元資料中自動遵循圖片的定位;

兼容性:

  • 淺綠 = 支援
  • 紅色 = 不支援
  • 粉色 = 部分支援
IE Firefox Chrome Safari Opera iOS Safari Android Browser Android Chrome
6.0-11.0 2.0-38.0 4.0-43.0 3.1-8.1 5.0-28.0 3.2-8.1 2.1-4.4.4 18.0-40.0