background no-repeat将background-clip属性设置为padding-box？

Question

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

首先将li背景属性设置为：

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

设置了no-repeat，但省略了background-clip。

第二个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;

请记住，background-clip的默认值是“border-box”，我假设设置第二个和第三个li的值是多余的，但只有第二个li显示背景图像。

在Opera v.37.0.2178.54和Google Chrome v.50.0.2661.102 m中测试

请帮我弄清楚它的工作方式。谢谢！

Answer 1

background-repeat不会以任何方式影响background-clip属性。您在第二个li中看到的差异是由于不同的原因。在简写属性中，当我们只提供一个box值时，background-clip和background-origin都会获得相同的值。

来自W3C Spec：

  

如果存在一个值，则它将'background-origin'和'background-clip'都设置为该值。

因此，您的第二个li获得background-origin: border-box，而其他两个background-origin则设置为default value which is padding-box。

background是指定li应从哪里开始的属性。由于第一个和第三个background-origin将padding-box设置为background-origin，因此它们的背景设置在填充框区域内（边框内）。

如果为所有三个li设置相同background-repeat，那么无论ul { list-style-type: none; } li { border: 10px solid rgba(0, 0, 0, 0.60); padding-left: 20px; margin-bottom: 10px; } .no-repeat { background: url(http://postcrossing-ua.com/static/pybb/smiles/D83DDE03.png) no-repeat 0 50% / 15px 15px; background-origin: border-box; } .no-repeat-border-box { background: url(http://postcrossing-ua.com/static/pybb/smiles/D83DDE03.png) no-repeat 0 50% / 15px 15px border-box; } .border-box { background-clip: border-box; background-origin: border-box; }设置如何，它们都会以相同的方式显示。

＆＃13;

＆＃13;

<ul>
  <li class="no-repeat">White</li>
  <li class="no-repeat-border-box">Black</li>
  <li class="no-repeat border-box">Red</li>
</ul>

＆＃13;

SIGSEGV

＆＃13;

＆＃13;

＆＃13;