CSS3教程:background-clip和background-origin
互聯(lián)網(wǎng) 發(fā)布時間:2008-10-17 19:22:43 作者:佚名
我要評論

原文:http://www.planabc.net/2008/04/14/background-clip_background-origin/
background-clip 和 background-origin 是 CSS3 中新加的 background module 屬性,用來確定背景的定位。
background-clip 用來判斷 background 是否包含 border 區(qū)域。而 background-or
原文:http://www.planabc.net/2008/04/14/background-clip_background-origin/
background-clip 和 background-origin 是 CSS3 中新加的 background module 屬性,用來確定背景的定位。
background-clip 用來判斷 background 是否包含 border 區(qū)域。而 background-origin 用來決定 background-position 計算的參考位置。
語法為: background-clip: [border | padding] [, [border | padding]]* background-origin: [border | padding | content] [, [border | padding | content]]*

對于 background-clip:
如果是 padding 值,則 background 忽略 padding邊緣,border 是透明的。如果是 border 值,則background 包括 border 區(qū)域。如果 background-image 圖片有多個,對應(yīng)的 background-clip 值之間用逗號分隔。
對于 background-origin:
如果是 padding 值,則 position 相對于 padding 邊緣("0 0" 為 padding 邊緣的左上角,而 "100% 100%" 為右下角)。如果是 border 值,則意味著相對 border 邊緣。而 border 值則相對于內(nèi)容邊緣。與 background-clip 相同,多個值也用逗號分隔。如果 background-clip 是 padding 值,background-origin 是 border 值,并且 background-position 是 "top left"(默認(rèn)初始值),則背景圖左上角將會被截取掉部分。
這兩個屬性僅從 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;
這一對 CSS3 屬性已在 Mozilla, Safari 3 和 Konqueror 等瀏覽器中實現(xiàn),不過都是通過其私有屬性的表達(dá)方式。
引用:
基本非 IE 的瀏覽器的私有屬性一般都會以 -xxx- 這樣開始,-o-就是以 Presto 為引擎的 Opera 私有的、-icab- 是 iCab 私有的,-khtml- 是以 KHTML 為引擎的瀏覽器(如 Konqueror Safari)、-moz- 就是以 Mozilla 的 Gecko 為引擎的瀏覽器(如Firefox,Mozilla)、-webkit- 就是以 Webkit 渲染引擎(是 KHTML 的衍生產(chǎn)品)的瀏覽器(如 Safari、Swift)。
即支持的私有屬性分別為: moz-background-clip webkit-background-clip khtml-background-clip moz-background-origin webkit-background-origin khtml-background-origin
#p#
下面舉個運用 background-origin 屬性的簡單例子,效果如下圖:
運行代碼框
[Ctrl A 全部選擇 提示:你可先修改部分代碼,再按運行]

HTML 部分:
<button>這里是按鈕,是鈕不是妞</button>
CSS 部分(詳細(xì)見注釋):
button {
display:inline-block;/*觸發(fā)hasLayout*/
height:26px;
padding:0 20px;
cursor:pointer;
*overflow:visible;/*消除IE按鈕左右padding隨字?jǐn)?shù)長度變化的BUG*/
border:3px double #95071b;/*用3px 雙邊來模擬設(shè)計圖中的白線*/
border-right-color:#650513;
border-bottom-color:#650513;
background-color:#95071b;
/*設(shè)置背景裁切方式和參考線*/
-moz-background-clip:padding;
-webkit-background-clip:padding;
-khtml-background-clip:padding;
-moz-background-origin:padding;
-webkit-background-origin:padding;
-khtml-background-origin:padding;
/*向前兼容*/
background-clip:padding;
background-origin:padding;
color:#fff;
font-size:12px;
line-height:20px;
/*修正IE6下高度問題*/
_padding-top:2px;
_line-height:14px;
}
不足之處:此效果在 Opera 下無法實現(xiàn)。
當(dāng)然這只是一種對 HTML 代碼有潔癖的解決方法(限于對 background-clip 和 background-origin 屬性的學(xué)習(xí)和理解),當(dāng)然也可嘗試其他方法,也許會使 CSS 更簡潔,至于各種方法的優(yōu)缺點自己衡量。
擴展閱讀:
《Background and Border》
點擊這里返回 網(wǎng)頁制作 欄目
相關(guān)文章
- 這篇文章主要介紹了css中background-clip屬性的作用,background-clip屬性的通俗作用就是指定元素背景所在的區(qū)域,對css中background-clip屬性的相關(guān)知識感興趣的朋友一起看2018-03-29
CSS3基于背景裁剪(background-clip)實現(xiàn)的文本標(biāo)題透視特效源碼
這是一款CSS3基于背景裁剪(background-clip)實現(xiàn)的文本標(biāo)題透視特效源碼。畫面上的外星球與飛船背景中央呈現(xiàn)出帶有背景剪切透視的文本視覺效果。同時可響應(yīng)鼠標(biāo)的移動呈2017-11-17CSS3中background-clip和background-origin的區(qū)別示例介紹
本文為大家介紹下CSS3中background-clip和background-origin的區(qū)別,感興趣的朋友可以參考下2014-03-10深入淺出CSS3 background-clip,background-origin和border-image教程
最近在準(zhǔn)備一個下學(xué)期參加比賽的概念網(wǎng)站,希望能用到CSS3的新特性,比如background的background-clip或background-origin或border-image。但僅僅是依靠w3schools上的文檔2011-01-27詳解CSS3中的box-sizing(content-box與border-box)
這篇文章主要介紹了CSS3中的box-sizing(content-box與border-box)的相關(guān)資料,需要的朋友可以參考下2019-04-19- 這篇文章主要介紹了淺談CSS3 box-sizing 屬性 有趣的盒模型 ,需要的朋友可以參考下2019-04-02
- 一說到CSS的盒模型(Box model)我想很多人都會比較煩,特別是對于新手,然而這個Box model又是我們CSS運用中比較重要的一個屬性,box-sizing 屬性允許您以特定的方式定義匹2015-04-09
- 這篇文章主要介紹了CSS3屬性box-sizing使用指南,需要的朋友可以參考下2014-12-09
- CSS3 box-sizing屬性,在很多新手朋友來看是比較陌生的,接下來介紹CSS3 box-sizing使用及注意部分,感興趣的朋友可以了解下2013-01-08
解決CSS 中box-sizing與background-clip解決背景顯示范圍的問題
這篇文章主要介紹了CSS box-sizing與background-clip解決背景顯示范圍的問題,主要用這篇文章給大家做個記錄,避免大家遇到此類問題,感興趣的朋友跟隨小編一起看看吧2019-05-13