在图像上书写时不显示文本答案

【问题标题】：Text not show when write on images在图像上书写时不显示文本
【发布时间】：2016-06-11 01:25:46
【问题描述】：

我有两张图片，一张在左边，一张在右边。我在将文本写入两个图像时遇到问题。我正在粘贴 HTML 代码和 CSS 代码。请改正。

#container {
  width: 400px;
  height: 400px;
  position: relative;
}

#image {
  position: absolute;
  left: 0;
  top: 0;
}

#text {
  z-index: 999999999;
  position: absolute;
  color: white;
  font-size: 24px;
  font-weight: bold;
}

<div id="header">
  <img src="images/banner-img1.jpg" class="left">
  <p id="text"> jhcjdhdjshdjdhjd</p>
  <img src="images/banner-img2.jpg" class="right">
  <p id="text"> jgdhdgdhddhhsd</p>
</div>

【问题讨论】：

增加zindex并测试
ID 必须是唯一的。你的 CSS 引用了两个不存在的元素。
或 .left{position:relative}
请更正我的代码
Devpro 我都做了。没有任何作用

标签： html css

【解决方案1】：

您的两个段落都引用了相同的 ID，但 ID 必须是唯一的。请尝试在此处使用类。

.text { 
   ...
}

和

<p class="text"> ... </p>

此外，您在图像标签上使用了class="left" 和class="right"，但这些类还不存在于您的 css 代码中。

【讨论】：

【解决方案2】：

为图像创建一个容器并使其位置相对。（与页面的其余部分相处）将图像放入容器中。将文本放在容器内图像的正下方，并使其位置为绝对（以覆盖图像上的文本）并随意放置。最后，添加一些 CSS 技巧以满足您的需求。

【讨论】：