Css 背景无重复将背景剪辑属性设置为填充框？

我们有三个列表项的简单列表

第一个li背景属性设置为：

background: url(http://url-here.png) no-repeat 0 50% / 15px 15px;

不设置重复，但忽略背景剪辑

第二个li具有无重复和边框框设置的背景：

background: url(http://url-here.png) no-repeat 0 50% / 15px 15px border-box;

和第三个li类似于第一个li，但背景剪辑是手动设置的：

background: url(http://url-here.png) no-repeat 0 50% / 15px 15px;
background-clip: border-box;

请记住，背景剪辑的默认值是“边框框”，我假设设置第二个和第三个li的值是多余的，但只有第二个li会按应有的方式显示背景图像

在歌剧五中测试。37.0.2178.54和谷歌Chrome v。50.0.2661.102米

---

请帮我弄清楚它的工作原理。谢谢大家!

否

背景重复

不会以任何方式影响

背景剪辑

属性。您在第二个

li

中看到的差异是由于不同的原因造成的。在short-hand属性中，当我们只提供一个

框

值时，

背景剪辑

和

背景原点

获得相同的值

从：

如果存在一个值，则会将“背景原点”和“背景剪辑”设置为该值

因此，您的第二个

li

获取

background-origin:border框

，而对于其他两个，它使用设置

background origin

是指定

background

应从何处开始的属性。由于第一个和第三个

li

将

背景原点设置为
填充框
，因此它们的背景设置在填充框区域内（在边框内）

如果为所有三个
li
设置了相同的
background origin
，则无论
background repeat
设置如何，它们都将以相同的方式显示


ul{
列表样式类型：无；
}
李{
边框：10px固体rgba（0,0,0,0.60）；
左侧填充：20px；
边缘底部：10px；
}
1.不许重复{
背景：url(http://postcrossing-ua.com/static/pybb/smiles/D83DDE03.png)无重复0 50%/15px 15px；
背景来源：边框框；
}
.无重复边框框{
背景：url(http://postcrossing-ua.com/static/pybb/smiles/D83DDE03.png)无重复0 50%/15px 15px边框盒；
}
.边框框{
背景剪辑：边框框；
背景来源：边框框；
}

白色
黑色
红色
谢谢你，哈利，这很有道理！