标题和图像重叠[重复]

Question

此问题已经在这里有了答案：

Bootstrap 3: Text overlay on image（4个答案）

关闭4年前。

在HTML和CSS中非常幼稚，除了创建图像外，我无法做到这一点。那么，如何创建与背景颜色重叠的文本呢？

详细信息：

我有一个方形图像，我想添加一个重叠的文本。该文本应具有横跨整个图像的背景色，并应在垂直和水平方向居中，如图所示。

如何在HTML + CSS中执行此操作？我想避免创建图像。

谢谢！

Answer 1

我使用了企鹅的样本图像。

HTML代码-

<div class="imageShadow textCenter">
 <h2>Hello</h2>
</div>

CSS代码-

.imageShadow {
  background: 
    linear-gradient(
      rgba(0, 0, 0, 0.8),
      rgba(0, 0, 0, 0.8)
    ),
 url('http://amolife.com/image/images/stories/Animals/penguins%20(8).jpg');
  background-size: cover;
  width: 300px;
  height: 200px;
  margin: 10px 0 0 10px;
  position: relative;
  float: left;
}
.textCenter h2 {
  color: white;
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 2rem;
  transform: translate(-50%, -50%);
}

[这里是一个小提琴，以备您在操作中看到它-http://jsfiddle.net/SarhadSalam/wut8gtwq/

Answer 2

首先，创建一个仅包含图像的周围容器。然后，在具有[]的容器内创建另一个DIV

position: absolute;
width: 100%;
height: 100%;
opacity: 0.5;
text-align: center;
也添加所需的background-color，font-size和color，并尝试不同的不透明度值。

Answer 3

我猜您想在悬停时创建带有重叠图像。您可以通过这种方式进行。

Answer 4

尝试一下