html - 图片顶部的 CSS block

Question

我正在尝试创建这样的东西(没有蓝线):

灰色的是我必须插入的图片，字母必须显示在上面。

我试过自己做，但我做不到

Answer 1

把 <img>标记为 div wrapper ，放第二个div 到 第一个(在 img 之后)，将文本写入该 div 并使用 CSS 规则，例如

.my_div_wrapper {
  position: relative;
  width: 300px;
}
.my_image {
  width: 100%;
)
.my_text_over_image {
  position: absolute;
  bottom: 20px;
  height: 50px;
  color: white;
  background: rgba(0, 0, 0, 0.5);
}

重要的是绝对位置。背景设置中的最后一个数字是背景颜色的不透明度。根据需要选择颜色和不透明度(以及其他所有内容)。