图像覆盖div的背景颜色

Question

图像覆盖DIV的背景颜色，但文字正在显示。

我的代码是

<div id="testing">
  <img src="https://images.unsplash.com/uploads/1413142095961484763cf/d141726c?dpr=1&auto=compress,format&fit=crop&w=1350&h=&q=80&cs=tinysrgb&crop=">
  <div id="sample">
  Text
  </div>
</div>

CSS

#testing {
  width: 200px;
  height:150px;
}
img {
  width:200px;
  height:150px;
}
#sample {
  margin-top:-15px;
  background: black;
  color: white;
  text-align:center;
}

结果显示为

您可以在

找到代码

https://jsfiddle.net/cz605rc5/

它可以用div的后台css解决。

但我更喜欢使用img和想要覆盖图片底部的黑色背景标签。

Answer 1

您可以在图片标记上添加transparento overlay，因为它将是透明的，图像将充当背景..

Fiddle

.overlay{
  position:absolute;
  top:0px;
  left:0px;
  width:100%;
  min-height:100%;
}

然后您可以根据需要在叠加层内移动文本。

Answer 2

由于我们在2017年，我认为您应该首先更改HTML代码：

change

现在用于CSS： 您只需要将figcaption大小作为图像大小。 然后将其置于绝对位置，将其z-index更高于img，并将其背景设置为渐变。 最后一件事是将跨度放在某个地方：将其设置为＆＃34;绝对＆＃34;放置它（例如：左：5px;底部：15px;）

如果你想要完整的CSS请问（：

Answer 3

行高导致问题。您可以向#sample添加line-height: 0;，也可以更改正文的行高。您甚至可以将文本包含在某些标签中并将其应用于该标签。