代码之家 › 专栏 › 技术社区 › Wouter van der Zee

如何使用绝对定位覆盖div[duplicate]去除图像下方的空白

removing-whitespace absolute position css

Wouter van der Zee · 技术社区 · 7 年前

我在图像上使用绝对定位的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>

2 回复 | 直到 7 年前

coder 7 年前

默认情况下,图像是内联渲染的,就像字母一样。

您可以调整图像的垂直对齐以将其放置在其他位置(例如中间),或更改显示,使其不内联。

Saucistophe 7 年前

#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>

推荐文章

YunusoviÄ · 我无法用css更改html段落颜色

1 年前

Blake · 无法使用CSS旋转Angular 15中的字体图标

1 年前

Maarten -Monica for president · 将图像放在锚点标记内时调整网格中的图像大小

1 年前

Phil Lucks · 如何制作边界的外半径?

1 年前

roy_meir · 创建自定义下拉式元素

1 年前

Community wiki · 如何为触摸设备优化网站

1 年前

Paras Chandravanshi · 为什么<ul>没有从其父<p>元素继承?

1 年前

tpetzoldt · 如何在有光泽的情况下抑制图像的抗锯齿?

1 年前

boyenec · 反应如何将css样式应用于我从api respose获得的页面的spcifc部分

1 年前

manofconstsorrow · 点击导航项目关闭汉堡菜单

1 年前