css - 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;

和第三里类似于第一里，但背景剪辑手动设置:

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 :

If one value is present then it sets both ‘background-origin’ and ‘background-clip’ to that value.

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

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

如果为所有三个 li 设置相同的 background-origin 那么它们将以相同的方式显示，而不管 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;
}

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