问答详情
源自:5-2 CSS3背景 background-clip

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

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

提问者:qincai 2017-09-20 23:47

个回答

  • 爱上慕婉清6262634
    2017-09-27 15:42:16
    已采纳

    根据我的测试,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效果一样

  • 慕函数1542553
    2018-01-02 20:26:58

    说实话,一点都看不懂

  • qincai
    2017-09-21 23:37:50

    http://img1.mukewang.com/59c3dc710001d46011520545.jpg

    当背景是图片时,在控制台里设置background-clip为border-box、padding-box时的效果一样

  • qq_番茄炒西红柿_03233786
    2017-09-21 13:35:10

    你有代码么,首先检查下你的no-repeat是否存在。如果存在再检查别的代码是否有错。否则默认的是从padding-box开始的