css - 同一个 DIV 中具有不透明背景的图像和文本

Question

我正在尝试制作不透明的图像和文本!

背景出现在同一个 div 中，而不使用图像作为背景。我怎样才能使这项工作？

请看图片:

Answer 1

<div>
  <span>Title</span>
  <img src="" />
</div>

div{
  position: relative;
}
span{
  background: rgba(0,0,0,0.5);
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 6px;
  display: block;
}