下面都是我自己的理解, 如果有不对的地方, 还请大家帮忙指出.
下面是在 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: 表示超出内容区域范围的部分将被裁掉. 如下图:
