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

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在这里

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

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