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