图片覆盖了div的背景色答案

【问题标题】：Image cover the background color of div图片覆盖了div的背景色
【发布时间】：2018-03-17 12:37:33
【问题描述】：

图像覆盖了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，并且想在图片底部覆盖黑色背景标签。

【问题讨论】：

我无法理解你的问题。您能否让我们更好地了解您的问题以及您希望最终结果是什么？
@andrewgu ，你可以在问题的最后看到，“想要覆盖图像底部的黑色背景标签”

标签： css

【解决方案1】：

你可以在你的图片标签上添加一个透明覆盖，因为它是透明的，图片将充当背景..

Fiddle

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

然后您可以根据需要移动覆盖层内的文本..

【讨论】：

【解决方案2】：

因为我们在 2017 年，我认为你应该先更改 HTML 代码：

<figure>
  <figcaption><span lang="en">image title</span></figcaption>
  <img src="img.png" alt="Alternative Text" / >
</figure>

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

如果您想要完整的 css，只需询问 (:

【讨论】：

【解决方案3】：

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

【讨论】：