Question

我在图像上使用绝对定位的div。 div具有彩色背景，不透明度小于1（因此您可以看到图像）。我的问题是你可以在图像下面看到一些空白区域。

#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

标题的高度为100％，这意味着它将占父母身高的100％。然后剩余的元素重叠。

您可以删除标题中的高度：100％指令，让布局自动设置，或指定较低的百分比值并相应地调整字体大小。

#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去除图像下方的空白区域

2 个答案: