CSS背景.将内容框与封面组合 [英] CSS Background. Combining content-box with cover

问题描述

如果我同时使用background-origin:content-box;和背景尺寸:封面；在具有一些填充的元素上.背景图片仍覆盖底部填充(在Safari，Chrome，Firefox和IE的最新版本中)

If I use both background-origin: content-box; and background-size: cover; on an element with some padding. The background image still covers the bottom padding (in latest versions of Safari, Chrome, Firefox and 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

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

Is this the correct behaviour? If so, why (am I missing something obvious here)?

推荐答案

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

Yes, this is the correct behaviour. background-origin simply shifts the background image. It doesn't modify the background painting area. You need to set background-clip as well, otherwise its value remains as border-box and any part of the image that exceeds the content area due to mismatched aspect ratios will bleed into the padding area:

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

这篇关于CSS背景.将内容框与封面组合的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！