代码之家 › 专栏 › 技术社区 › abalter

如何在容器中的图像上覆盖文本--并将文本保留在容器中

overlay background-image image css html

abalter · 技术社区 · 7 年前

我遵循在无数个地方给出的解决方案,如何在图像上覆盖文本,使用 relative 和 absolute position: absolute 从容器中跳出并达到极限 top right

我很乐意使用背景图像,但我需要技巧使容器与图像大小匹配,我不知道如何使其流动。

这似乎是一个非常简单的问题,人们总是在寻找解决方案。另外,在不透明图像上叠加文本,需要使用 :after

.container {
  margin: 0 10%;
}
.container img {
  position: relative;
  width: 100%;
}

#div1 .text {
  position: absolute;
  bottom: 0;
  right: 0;
}

#div2 .text {
  position: absolute;
  top: 0;
  left: 0;
}

<div id="div1" class="container">
  <img src="http://placehold.it/800x200" />
  <div class="text">
    <h3>Top Image</h3>
    <p>This text should be in the bottom right of the top image.</p>
  </div>
</div>

<div><p>A bunch of miscellaneous text here.</p></div>

<div id="div2" class="container">
  <img src="http://placehold.it/800x200" />
  <div class="text">
    <h3>Lower Image</h3>
    <p>This should be in the top left of the lower image.</p>
  </div>
</div>

2 回复 | 直到 7 年前

Julio Feferman Mohamed Mostafa Goda 7 年前

你需要设置 position:relative .container 哪个是正确的容器 .text img .文本 而不是它的容器。

.container {
  margin: 0 10%;
  position: relative;
}
.container img {
  width: 100%;
}

#div1 .text {
  position: absolute;
  bottom: 0;
  right: 0;
}

#div2 .text {
  position: absolute;
  top: 0;
  left: 0;
}

<div id="div1" class="container">
  <img src="http://placehold.it/800x200" />
  <div class="text">
    <h3>Top Image</h3>
    <p>This text should be in the bottom right of the top image.</p>
  </div>
</div>

<div><p>A bunch of miscellaneous text here.</p></div>

<div id="div2" class="container">
  <img src="http://placehold.it/800x200" />
  <div class="text">
    <h3>Lower Image</h3>
    <p>This should be in the top left of the lower image.</p>
  </div>
</div>

vtvcode 7 年前

我不太确定是否有足够的信息。我假设您的容器宽800px,高200 px(我使用了最小高度,以防您的容器增加其高度)。如果您可以提供更具体的信息,那将是非常好的(有更复杂的方法使用对象位置属性(etc))使其更“智能”。

img {
  max-width: 100%;
  display: block;
  height: auto;
}

.container {
  position: relative;
  min-height: 200px;
  width: 800px;
  margin: 0 10%;
}

.container img {
  z-index: 500;
  top: 0;
  left: 0;
}

.container .text {
  position: absolute;
  z-index: 1000;
}

#div1 .text {
  bottom: 0;
  right: 0;
}

#div2 .text {
  position: absolute;
  top: 0;
  left: 0;
}

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

5 月前

Jamie · 在CSS链接的文件名中添加Jinja占位符

5 月前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

5 月前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

5 月前

Reegan · 使用Angular ngFor指令在html中渲染嵌套对象值

5 月前

wqyutv · 当找不到文件时,任何破坏错误的东西都不会出现,我该怎么解决这个问题?

5 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

5 月前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

5 月前

Lorenzo Bertolaccini · 在Angular项目中通过对话框后,在控制台中显示但在HTML中不显示的数据数组

5 月前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

5 月前