如何在不生成 ugly/messy 空白的情况下将顶部 <div> 和底部 <div> 重叠到图像中？

Question

我的 html 中有一个顶部 div、一个图像和一个底部 div，我想将 2 div 重叠到我的图像中，第一个 div 应该覆盖图像顶部的一些区域，底部 div 应该覆盖图像底部的一些区域，div 应该是覆盖图像的那个图像（在显示器前面）。我将如何以干净的方式做到这一点（不留下白色 spaces）并使其响应视图或父级的宽度 div?

这是我的html

* {
  padding: 0px;
  margin: 0px;
}

#image {
  max-width: 100%;
}

.rects {
  height: 100px;
}

#rect-top {
  background-image: linear-gradient(45deg, rgba(0, 194, 228, 0.75), rgba(214, 0, 203, 0.479));
}

#rect-bottom {
  background-image: linear-gradient(45deg, rgba(214, 0, 203, 0.479), rgba(0, 194, 228, 0.75));
}

<h1>Start</h1>
<div id="rect-top" class="rects"></div>
<img id="image" src="image-with-gradient.jpg">
<div id="rect-bottom" class="rects"></div>
<h1>End</h1>

这就是我想要达到的效果：

如你所见h1标签前后没有白色space

Answer 1

在 div 中包裹您的图像并重叠 divs。在里面，position 你的重叠 div 元素 absolute.

作为旁注，请勿将 id 用于样式目的。另请注意，页面中的任何 id 只能存在于单个元素上； id 每个文档必须是唯一的。

您可以在此处使用伪元素 ::before 和 ::after，而不是为渐变创建无意义的标记。

* {
  padding: 0;
  margin: 0;
}

.image-container {
  padding: 50px 0;
  position: relative;
}

.image {
  max-width: 100%;
}

.image-container::before,
.image-container::after {
  content: '';
  height: 100px;
  position: absolute;
  width: 100%;
}

.image-container::before {
  background-image: linear-gradient(45deg, rgba(0, 194, 228, 0.75), rgba(214, 0, 203, 0.479));
  top: 0;
}

.image-container::after {
  background-image: linear-gradient(45deg, rgba(214, 0, 203, 0.479), rgba(0, 194, 228, 0.75));
  bottom: 0;
}

<h1>Start</h1>
<div class="image-container">
  <img class="image" src="https://placekitten.com/g/1920/1080">
</div>
<h1>End</h1>

这也使得 z-index 的使用过时，因为带有 position: absolute 的元素会自动位于未定位的元素之上。

如何在不生成 ugly/messy 空白的情况下将顶部 <div> 和底部 <div> 重叠到图像中？

how to overlap a top <div> and a bottom <div> into an image without generating ugly/messy white spaces?

html

css

web-frontend