下面都是我自己的理解, 如果有不对的地方, 还请大家帮忙指出.
下面是在 chrome 浏览器上测试的

background-clip 和 background-origin

先说说background-image

background-image 默认的起始位置是 padding 外边缘的左上角. 如下图所示:

但是注意: 默认的结束位置却是 border 外边缘的右下角, 如下图所示:

如果想让起始位置变为 border 外边缘的左上角, 或者内容区域的左上角, 这时就是 background-origin 发挥作用的时候了.

background-origin

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

它有三个值:

1. padding-box: 这是它的默认值, 指定 background-image 的左上角是 padding 外边缘的左上角.

2. border-box: 指定 background-image 的左上角是 border 外边缘的左上角.

3. content-box: 指定 background-image 的左上角是 内容区域 的左上角.

background-clip

它的作用是指定 background-color 和 background-image 的作用范围.

它也有三个值, 和 background-origin 一样的值.

1. border-box: 这是它的默认值, 表示超出 border 外边缘的部分将被裁掉. 如下图:

2. padding-box: 表示超出 padding 外边缘的部分将被裁掉. 如下图:

3. content-box: 表示超出内容区域范围的部分将被裁掉. 如下图:

关键字：html, css, 左上角, 边缘

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！