Html CSS背景。结合内容盒和封面

如果我同时使用背景原点：内容框；背景尺寸：封面；在带有一些填充的元素上。背景图像仍然覆盖底部填充（在最新版本的Safari、Chrome、Firefox和IE中）

---

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

是的，这是正确的行为<代码>背景原点仅移动背景图像。它不会修改背景绘制区域。您还需要设置

背景剪辑

，否则其值保持为

边框框

，并且由于纵横比不匹配而超出内容区域的图像的任何部分都将渗入填充区域：

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

---

background origin

和

background clip

之间存在差异

背景剪辑CSS属性指定元素的背景（颜色或图像）是否延伸到其边框下方

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

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

有关MDN的更多信息：

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