如何使用绝对定位覆盖 div 去除图像下方的白色 space

Question

我在图像顶部使用绝对定位 div。 div 具有不透明度小于 1 的彩色背景（因此您可以看到图像）。我的问题是您可以在图片下方看到一些白色 space。

#zero {
  max-width: 450px;
  margin: 0 auto;
}

#container {
  position: relative;
}

img {
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
}

#title {
  position: absolute;
  top: 0;
  right: 0 bottom: 0;
  left: 0;
  height: 100%;
  width: 100%;
  margin: 0;
  color: white;
  background-color: red;
  opacity: 0.67;
}

<div id="zero">
  <div id="container">
    <img src="450x300.jpg">
    <h2 id="title">Title</h2>
  </div>
  <p>How to get rid of the white space below the image?</p>
</div>

Answer 1

默认情况下，图像以内嵌方式呈现，就像字母一样。

您可以调整图像的垂直对齐方式以将其放置在其他位置（例如中间）或更改显示方式使其不内嵌。

Answer 2

标题有 height:100%，这意味着它将占据其 parent 高度的 100%。然后剩余的元素与它重叠。

您可以删除标题中的 height:100% 指令，让布局自动设置，或者指定一个较低的百分比值并相应地调整您的 font-size。

#zero {
  max-width: 450px;
  margin: 0 auto;
}

#container {
  position: relative;
}

img {
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
}

#title {
  position: absolute;
  top: 0;
  right: 0 bottom: 0;
  left: 0;
  width: 100%;
  margin: 0;
  color: white;
  background-color: red;
  opacity: 0.67;
}

<div id="zero">
  <div id="container">
    <img src="450x300.jpg">
    <h2 id="title">Title</h2>
  </div>
  <p>How to get rid of the white space below the image?</p>
</div>

如何使用绝对定位覆盖 div 去除图像下方的白色 space

How to get rid of white space below image with absolute positioned overlay div

css

position

absolute

removing-whitespace