背景图不裁切时效果不是应该和padding-box一样吗？怎么和border-box一样了？

背景图的默认起始位置为padding-box，即background-origin：padding-box，在没有规定背景图起始位置时，背景图是不会延伸到边框区域的（已经测试过背景色才会延伸到边框区域），那么，没有对背景图裁切时，背景图不是应该和padding-box一样么？

qincai

2017-09-20

源自：十天精通CSS3 5-2

关注问题我要回答

2314

操作

收起

4 回答

爱上慕婉清6262634 回答被采纳 +2 积分
2017-09-27

根据我的测试，background-clip这个属性是受到background-origin的限制。即background-clip默认值等同于background-origin设置的值。

1，设置background-origin:border-box;则background-clip默认是border-box,可选padding-box和content-box。

2，设置background-origin:padding-box;则background-clip默认是padding-box,可选content-box，选择border-box时与padding-box展示效果相同。

3，设置background-origin:content-box;则background-clip默认是content-box,这个时候实质上background-clip属性已经失去作用了，选择border-box，padding-box，content-box展示效果是一样的。

你的那个图片中没设置background-origin属性，在浏览器Computed里面应该可以看到计算后的background-origin样式是padding-box,所以background-clip设置border-box与padding-box效果一样

1 回复有任何疑惑可以回复我~

收起回答

qincai 提问者

非常感谢！

2017-10-02 回复有任何疑惑可以回复我~

慕运维603224 回复 qincai 提问者

经过我的测试，层主说的并不对呀。结果显示background-clip默认值就是border-box，跟background-origin无关。而且background-origin只对背景图片起作用，背景颜色是始终从边框开始填充的。background-clip既可以裁剪背景图片也可以裁剪背景颜色。

2017-11-10 回复有任何疑惑可以回复我~