我通常会使用将背景图片居中background-size: cover。
.centered image {
background: transparent url(my-image.jpg) no-repeat center center;
background-size: cover;
}
但是，在这种情况下，我需要将背景图像从顶部偏移，使其低100px。
原因是我在父div上使用了负的上边距，但我希望背景保持原样。
从下面的代码片段中可以看到，div（红色）被上拉，然后背景图像又被向下推。
.section1 {
height: 200px;
background-color: lime;
}
.section2 {
min-height: 200px;
margin: -100px 50px 0 50px;
background-color: red;
background-image: url("https://thumb.ibb.co/f1inv8/Adobe_Stock_96159207_Preview.jpg");
background-position: center 100px;
background-repeat: no-repeat;
background-size: cover;
}<div class="section1">
</div>
<div class="section2">
</div>但是，如果我以这种方式使用背景位置，则无法在y轴上正确居中图像。它似乎默认为top。
我真正想做的是对齐背景框架，然后将背景居中居中。
任何人都知道如何实现这一目标？
我将尝试为您提供一个更清晰的示例。
我们将有一个，div并且我们将img在该div中使用一个标签模仿背景。
那个div基本上是一个元素，其背景为overflow：hidden，我的意思是通常在元素上设置overflow：hidden时，如果它的内容大于它，它只会隐藏外面的东西。
但是背景不是，但是它具有隐藏的溢出属性，因此，如果背景较大，则将其切除，直到使用background-size：100％100％调整其大小为止；使它适合两个轴。
例
div {
width: 100px;
height: 100px;
/* to mimic the img being cut of, if it's larger*/
overflow: hidden;
border: 1px solid;
/* to have a visual understanding*/
}
.test {
background: url('https://thumb.ibb.co/f1inv8/Adobe_Stock_96159207_Preview.jpg');
}<div class="element">
<img src="https://thumb.ibb.co/f1inv8/Adobe_Stock_96159207_Preview.jpg" class="background">
</div>
<div class="test"></div>希望您现在了解发生了什么。
因此，使用即可轻松实现所需的目标<img>。
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.section1 {
height: 200px;
background-color: lime;
}
.section2 {
height: 200px;
margin: -100px 50px 0 50px;
background-color: red;
}
.section2>img {
margin-top: 100px;
object-fit: cover;
width: 100%;
max-height: 100%;
}<div class="section1">
</div>
<div class="section2">
<img src="https://thumb.ibb.co/f1inv8/Adobe_Stock_96159207_Preview.jpg">
</div>这不是您要查找的内容吗？将div向上推，但背景仍保持原位置？可以使用flex完善它，但是我会告诉你的。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句