css3之background-origin和background-clip的差別與聯系

background-origin（CSS3新屬性）

規定 background-position 屬性相對于什麼位置來定位

有三個屬性值：

• border-box（忽略border，即會覆寫border的位置）
• padding-box（忽略padding，即會覆寫padding的位置，不會覆寫border）
• content-box（隻顯示在content中，不會覆寫border和padding）

下面用圖示例

<span style="font-size:14px;">div{
            width: 100px;
            height: 100px;
            border: 5px dashed blue;
            padding: 10px;
            margin: 100px auto;;
            background: url("../bg.png") no-repeat;
            background-origin: content-box;
        }</span>
           

(background-origin如果寫在css中隻有Opera浏覽器可以識别，如果希望在火狐或者chrome或 Safari中使用，要使用它們浏覽器的私有屬性-moz-background-origin(Firefox),-webkit-background-origin(chrome,safari)，并且對應的值是content,padding,border,省略了-box 注釋：如果背景圖像的 background-attachment 屬性為 "fixed"，則該屬性沒有效果。

浏覽器支援：IE9+、Firefox 4+、Opera、Chrome 以及 Safari 5+ 支援 background-origin 屬性。

background-clip（CSS3新屬性）

規定 背景的繪制區域，即裁剪，通常和background-origin一起使用

也有三個屬性值：

• border-box（忽略border，即會覆寫border的位置）
• padding-box（忽略padding，即會覆寫padding的位置，不會覆寫border）
• content-box（隻顯示在content中，不會覆寫border和padding）

下面用圖示例

background-origin: border-box;
background-clip: content-box;
           

浏覽器支援：IE9+、Firefox、Opera、Chrome 以及 Safari 支援 background-clip 屬性。注釋：Internet Explorer 8 以及更早的版本不支援 background-clip 屬性。

此外，還有一個小實踐：點選打開連結