|
原文：http://www.planabc.net/2008/04/14/background-clip_background-origin/
background-clip 和 background-origin 是 CSS3 中新加的 background module 屬性，用來(lái)確定背景的定位。
background-clip 用來(lái)判斷 background 是否包含 border 區(qū)域。而 background-origin 用來(lái)決定 background-position 計(jì)算的參考位置。
語(yǔ)法為：
- background-clip: [border | padding] [, [border | padding]]*
- background-origin: [border | padding | content] [, [border | padding | content]]*
對(duì)于 background-clip：
如果是 padding 值，則 background 忽略 padding邊緣，border 是透明的。如果是 border 值，則background 包括 border 區(qū)域。如果 background-image 圖片有多個(gè)，對(duì)應(yīng)的 background-clip 值之間用逗號(hào)分隔。
對(duì)于 background-origin：
如果是 padding 值，則 position 相對(duì)于 padding 邊緣（"0 0" 為 padding 邊緣的左上角，而 "100% 100%" 為右下角）。如果是 border 值，則意味著相對(duì) border 邊緣。而 border 值則相對(duì)于內(nèi)容邊緣。與 background-clip 相同，多個(gè)值也用逗號(hào)分隔。如果 background-clip 是 padding 值，background-origin 是 border 值，并且 background-position 是 "top left"（默認(rèn)初始值），則背景圖左上角將會(huì)被截取掉部分。
這兩個(gè)屬性僅從 CSS3 才出現(xiàn)，在未使用該屬性 background module 中的默認(rèn)表現(xiàn)又如何呢？
background-clip 默認(rèn)類似于 background-clip:border。
background-origin 默認(rèn)類似于 background-origin:padding。
但 IE 又是特例 （It sucks）。
在 IE6 、IE7 中，一般元素（button 等除外）的背景相當(dāng)于：background-clip:border; background-origin:border;
而 hasLayout 的元素（加上 button 等）的背景則相當(dāng)于：background-clip:padding; background-origin:padding;
這一對(duì) CSS3 屬性已在 Mozilla, Safari 3 和 Konqueror 等瀏覽器中實(shí)現(xiàn)，不過(guò)都是通過(guò)其私有屬性的表達(dá)方式。
引用：
基本非 IE 的瀏覽器的私有屬性一般都會(huì)以 -xxx- 這樣開(kāi)始，-o-就是以 Presto 為引擎的 Opera 私有的、-icab- 是 iCab 私有的，-khtml- 是以 KHTML 為引擎的瀏覽器（如 Konqueror Safari）、-moz- 就是以 Mozilla 的 Gecko 為引擎的瀏覽器（如Firefox，Mozilla）、-webkit- 就是以 Webkit 渲染引擎（是 KHTML 的衍生產(chǎn)品）的瀏覽器（如 Safari、Swift）。
即支持的私有屬性分別為：
出處：藍(lán)色理想
責(zé)任編輯：bluehearts
上一頁(yè) 下一頁(yè) background-clip/origin一則運(yùn)用 [1]
◎進(jìn)入論壇網(wǎng)頁(yè)制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。
|
第 1 頁(yè) background-clip/origin一則運(yùn)用 [1]
第 2 頁(yè) 
