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

Posted 2023-03-05

【中文标题】在图像上书写时不显示文本

【英文标题】：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 引用了两个不存在的元素。

或 .leftposition:relative

请更正我的代码

Devpro 我都做了。没有任何作用

【参考方案1】：

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

.text  
   ...

和

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

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

【参考方案2】：

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