下面都是我自己的理解, 如果有不對的地方, 還請大家幫忙指出.
下面是在 chrome 瀏覽器上測試的

background-clip 和 background-origin

先說說background-image

background-image 預設的起始位置是 padding 外邊緣的左上角. 如下圖所示:

但是注意: 預設的結束位置卻是 border 外邊緣的右下角, 如下圖所示:

如果想讓起始位置變為 border 外邊緣的左上角, 或者內容區域的左上角, 這時就是 background-origin 發揮作用的時候了.

background-origin

它的作用就是改變 background-image 左上角的起始位置.

它有三個值:

• padding-box: 這是它的預設值, 指定 background-image 的左上角是 padding 外邊緣的左上角.

• border-box: 指定 background-image 的左上角是 border 外邊緣的左上角.

• content-box: 指定 background-image 的左上角是 內容區域 的左上角.

background-clip

它的作用是指定 background-color 和 background-image 的作用範圍.

它也有三個值, 和 background-origin 一樣的值.

• border-box: 這是它的預設值, 表示超出 border 外邊緣的部分將被裁掉. 如下圖:

• padding-box: 表示超出 padding 外邊緣的部分將被裁掉. 如下圖:

• content-box: 表示超出內容區域範圍的部分將被裁掉. 如下圖: