如何将图像叠加到部分上？

Question

所以说到编码，我完全是个新手。我目前正在尝试制作一个网站，但我已经走到了死胡同。正如上面的问题总结的那样，我试图在背景上覆盖一张不同于白色的图片。图片需要延伸到彩色背景之外，“到达”白色背景。我提交了一张图片，可以更好地解释我的目的。

我试图用容器 class 创建一个部分并在其中插入图像，但这将图像的大小限制为 section.m

的大小

Answer 1

让图像移出容器的最简单方法是给它一个负边距。在此示例中，我添加了 margin-top: -60px; 的负边距。包括 10px 的填充，它在容器上方移动 50px。

body {
  margin: 0;
}

section {
  background-color: pink;
  padding: 10px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 10px;
  margin-top: 200px;
}

section div {
  background-color: white;
  padding: 5px;
}

section img {
  width: 100%;
  margin-top: -60px;
}

<section>
  <div>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>
  <img src="https://www.tacoshy.de/Images/Yoshi/IMAG0735.jpg">
</section>

Answer 2

我会使用以下两种方法来做到这一点：

翻译或翻译 Y

The translate() method moves an element from its current position (according to the parameters given for the X-axis and the Y-axis).

CSS 2D Transforms

section {
  margin-top: 100px;
  padding: 0 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: wheat;
  height: 200px;
}
img {
  width: 100%;
}
.img-container {
  width: 300px;
  transform: translateY(-40px) /* The Translate Y Property*/
}

<section>
  <div>
    <h1>BUSINESS EVENTS</h1>
  </div>
  <div class="img-container">
    <img src="https://dummyimage.com/600x400/000/fff&text=Random+Image" >
  </div>
</section>

保证金

就像我为 Y 轴使用负像素值一样，我可以为边距做类似的事情。

.img-container {
  width: 300px;
  margin-top: -40px;
}

为什么？

之所以特地选择这两个是因为

只有一个属性需要更改，因此非常简单
不妨碍文档流

还有一些其他的比如相对位置属性

.img-container {
  width: 300px;
  position: relative;
  top: -40px;
}

但我更喜欢保持简单。

如何将图像叠加到部分上？

How to overlay an image onto a section?

html

css

css-position

翻译或翻译 Y

保证金

为什么？