标题和图像重叠[重复]答案

【问题标题】：Caption and images overlapping [duplicate]标题和图像重叠[重复]
【发布时间】：2020-03-06 19:41:26
【问题描述】：

在 HTML 和 CSS 方面非常天真，我无法做到这一点，除非通过创建图像。那么，如何使用背景颜色创建与图像重叠的文本？

详细说明：

我有一个方形图片，我想添加一个重叠的文字。此文本应具有跨越整个图像的背景颜色，并且应垂直和水平居中，如图所示。

如何在 HTML+CSS 中做到这一点？我想避免创建图像。

谢谢！

【问题讨论】：

Soooo...你试过什么？
虽然您可能没有尝试过 CSS，但您应该当然已经整理了一些基本的 HTML 来开始实现它。那么，你有什么 HTML？你做了哪些尝试？ SO 不是免费的代码编写服务，它是帮助人们处理他们遇到的编程问题。尝试正确搜索解决方案，尝试实现某些东西，以及何时或是否不起作用？然后回来寻求帮助，显示相关的minimal reproducible example代码，阅读“How to Ask”指南。

标签： html css overlapping

【解决方案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/

【讨论】：

是否可以从 CSS 中删除图像并将其移动到 img 标记？

【解决方案2】：

首先，创建一个仅包含您的图像的周围容器。然后，在该容器内创建另一个 DIV，其中包含

position: absolute;
width: 100%;
height: 100%;
opacity: 0.5;
text-align: center;

同时添加所需的background-color、font-size 和color，并尝试不同的不透明度值。

【讨论】：

【解决方案3】：

我猜你想在悬停时创建带有叠加层的图像。你可以这样做。

h3, p {
  margin: 0;
}

.box {
  text-align: center;
  position: relative;
  float: left;
}

.box-hover {
  background: white;;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: 0.3s all ease-in;
}

.box:hover .box-hover {
  opacity: 0.9;
}

<div class="box">
  <img src="http://placehold.it/350x150/000000/ffffff">
  <div class="box-hover">
    <div class="box-hover-content">
      <h3>Title</h3>
      <p>Lorem ipsum dolor sit amet, <br> consectetur adipisicing.</p>
    </div>
  </div>
</div>

【讨论】：

不，只是一张静态图片。但是标题应该有一个图像中的背景，并在其背景矩形中居中。

【解决方案4】：

试试这个

position: absolute;
padding :30px;     /*(approx make change according to the page alignment for 
                     image)*/
text-align: center;
background-color:#CCC;
z-index:1;   /*( if no z-index is given for the previous image, else give more 
              value than that)*/

【讨论】：