时间戳

首页 > 解决方案 > 如何将图像叠加到部分上？

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

问题描述

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

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

我要做什么的图片

标签： htmlcsscss-position

解决方案

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

翻译或翻译 Y

该translate()方法将元素从其当前位置移动（根据给定的 X 轴和 Y 轴参数）。

CSS 2D 变换

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

但我更喜欢保持简单。

推荐阅读