两者区别
background-origin:只会影响图片的位置,不会影响图片
background-clip:会根据赋值对图片进行切割
容器div设置如下
.mydiv{
border: 100px solid rgba(255, 0, 0, 0.192);
padding: 200px;
width: 500px;
height:500px;
}
background-origin
格式
background-origin:border-box | padding-box(默认值)|content-box
background-origin不同赋值结果如下所示
可以看到,取值为border-box、padding-box、content-box时背景图片显示位置不同,图片会被缩放,显示是完整的
background-clip
格式
background-clip:border-box(默认值) | padding-box | content-box
可以看到,图片被切割,显示不全