gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 00:07:29 26 4
gpt4 key购买 nike

如果我同时使用 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

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

最佳答案

是的,这是正确的行为。 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;
}

关于html - CSS 背景。将内容框与封面相结合,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55615682/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com