html - 如何将带有彩色背景的 div 放置在前面的图像上?

标签 html css

<分区>

难倒了。

我有一张基本卡片,上面有一张图片和一个我想 float 在图片上的文本标签。

标签应该在文本后面和图像上面有一个背景色。

文本的背景改为位于图像的后面。

https://codepen.io/Mikeritteronline/pen/LwJYaR


html

<div class="card">
  <div class="card__image">
    <img src="https://placehold.it/1024x768" alt="">
  </div>
  <div class="card__tag">
    <p>Image Tag</p>
  </div>
</div>


CSS

img {
  max-width:100%;
  height: auto;
  margin: auto;
  }
.card {
  max-width: 320px;
  margin: auto;
  }
.card__tag p{
  background: blue;
  color: lime;
  padding: 0.25rem;
  margin-top: -3rem;
}

最佳答案

你可以添加position来实现你想要的。

.card {
  position: relative;
}
.card__tag p {
  position: absolute;
}

关于html - 如何将带有彩色背景的 div 放置在前面的图像上?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57428930/

上一篇:html - 为什么我的 CSS 规则没有按预期应用?

下一篇:css - Button Class 获取不到div的全长?

相关文章:

html - 使用带有/CSS 的图像构建产品框

javascript - 如何检测类(class)中的 child 人数?

尝试获取数据属性时 JavaScript 返回 NULL/Undefined

html - 未通过电子邮件 SQL 读取内联样式

css - 将媒体查询放入mixin

html - <LI> 订单显示不正确

html - 为什么我的网络表单页面检测不到 CSS 文件?

javascript - 在库中包含 <div></div>

html - 对齐底部在 flex box 中不起作用

javascript - 如何在点击广告后删除包含广告代码的 div?