Question

如果我同时使用background-origin：content-box;和背景大小：封面;在一个带有一些填充的元素上。背景图片仍然覆盖底部填充（在最新版本的Safari，Chrome，Firefox和IE中）

div {
  background-image: url('http://lorempixel.com/400/200/');
  background-origin: content-box;
  background-repeat: no-repeat;
  background-size: cover;
  border: 5px red solid;
  padding: 20px;
}

jsfiddle here

这是正确的行为吗？如果是这样，为什么（我在这里遗漏了一些明显的东西）？

Answer 1

是的，这是正确的行为。 background-origin只是移动背景图片。它不会修改背景绘画区域。您还需要设置background-clip，否则其值仍为border-box，并且由于不匹配的宽高比而超出内容区域的图像的任何部分都会渗入填充区域：

div {
  background-image: url('http://lorempixel.com/400/200/');
  background-clip: content-box;
  background-origin: content-box;
  background-repeat: no-repeat;
  background-size: cover;
  border: 5px red solid;
  padding: 20px;
}

Answer 2

background-origin和background-clip之间存在差异。

background-clip CSS属性指定元素的背景（颜色或图像）是否在其边框下方延伸。

background-origin CSS属性确定背景定位区域，即使用background-image CSS属性指定的图像原点的位置。

正如您所看到的，背景原点不会在底部边缘剪切图像，它只会使其开始（如在放置中）设置其值。但是，背景剪辑会使其可见或不可见，将根据您设置的值进行遮罩。

有关MDN的更多信息：

CSS背景。将内容框与封面相结合

2 个答案: