下面都是我自己的理解, 如果有不对的地方, 还请大家帮忙指出.

下面是在 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: 表示超出内容区域范围的部分将被裁掉. 如下图: