这两个属性都是 background 简写属性的其中之一，都有 border-box|padding-box|content-box 三个值可以设置。

background-origin 是控制背景图的位置，就是单纯设置背景图的边界，不会对背景颜色造成影响，默认值是 padding-box。

可以从效果图看到，不同值的设置只会影响到背景图在元素内的位置，三个图分别是从 border box，padding box，content box 盒子的位置开始展示背景图。

background-clip 是将背景图进行切割，得到的是一个不完整的图像，会对背景颜色造成影响（也会被切割），默认值是 border-box。

从效果图可以看出，不同的值会影响背景图展示的区域，border-box 会展示到边框 border，padding-box 会展示到内边距 padding，content-box 会展示到内容区域 content，而且连背景色也会被一同切割掉。

现在分别了解了这两个属性，我们就可以把两个属性一起使用去感受一下，给两个属性都设置为 content-box，可以看到会先把背景图放到 content box 盒子的区域，然后又对 content box 内容进行切割，就得到了下面展示的效果。