使用媒體片段(media fragments)裁減圖像的部分區(qū)域;
我們知道假設(shè)是使用背景圖的話,可以通過(guò) background-position 來(lái)決定從背景圖的哪個(gè)位置開(kāi)始顯示
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() 來(lái)指定使用純色作為圖像,但此時(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像,所以白色的文本仍然可見(jiàn)。唯一的問(wèn)題是,如果圖像不是矩形的,或者圖像是半透明的,那么這時(shí)圖像下面的黑色背景會(huì)被看到。
所以 image() 能更好的解決這個(gè)問(wèn)題,如下代碼:
body { background: white; color: black; }
div { background: image(black.png, black); color: white; }
本例的代碼能保證當(dāng)圖像無(wú)法加載時(shí),使用黑色背景替代,并且如果當(dāng)圖像正確加載時(shí),黑色背景將不渲染,很好的解決了之前例子中存在的問(wèn)題。
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 |