?
This document uses PHP Chinese website manual Release
語法:
image() = image( [ [ <image> | <string> ]? , <color>? ]! )
使用媒體片段(media fragments)裁減圖像的部分區(qū)域;
我們知道假設(shè)是使用背景圖的話,可以通過 background-position 來決定從背景圖的哪個位置開始顯示
div { background-image: url(test.png); background-position: 10px 10px; }
上述代碼會以圖像 test.png 的 (10,10) 位置作為圓點(diǎn)以進(jìn)行顯示,但如果你只想顯示圖像一部分,就變得有點(diǎn)困難。
所以之后可以這么做:
div { background-image: image(test.png#xywh=10,10,20,20); }
上述代碼會以圖像 test.png 的 (10,10) 位置作為圓點(diǎn),截取一個 20x20 的矩形以進(jìn)行顯示。
使用純色作為圖像;
示例:
div { background-image: image(black), url(test.png); }
可以使用 image() 來指定使用純色作為圖像,但此時 background-color 將不再生效,因為背景色總是在所有的背景圖之下。
當(dāng)指定的圖像不能下載或者正確解碼時,回退使用純色圖像;
之前的語法中,有一個不太恰當(dāng)?shù)膱鼍芭c之類似,如下代碼:
上述代碼能保證當(dāng) black.png 加載失敗,文本也仍然是可讀的,因為被純黑色的背景替代了圖像,所以白色的文本仍然可見。唯一的問題是,如果圖像不是矩形的,或者圖像是半透明的,那么這時圖像下面的黑色背景會被看到。
所以 image() 能更好的解決這個問題,如下代碼:
本例的代碼能保證當(dāng)圖像無法加載時,使用黑色背景替代,并且如果當(dāng)圖像正確加載時,黑色背景將不渲染,很好的解決了之前例子中存在的問題。
在圖像元數(shù)據(jù)中自動遵循圖像的定位;
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 |