如何将文本放在我的图像前面[重复]答案

【问题标题】：How to place the text in front of my image [duplicate]如何将文本放在我的图像前面[重复]
【发布时间】：2020-07-07 22:15:55
【问题描述】：

我是编码初学者，我想把文字放在图片前面。我正在使用科莫多。

【问题讨论】：

欢迎来到 Stack Overflow！请访问help center，以tour 了解内容和How to Ask。做一些研究，搜索关于SO的相关主题；如果您遇到困难，请发布您的尝试的minimal reproducible example，并注明输入和预期输出。 POST CODE 不是代码图片
只需单击编辑，然后单击[<>] sn-p 编辑器按钮并将您的代码粘贴到窗格中。从 placeholder.com 获取图片
您还需要在链接中始终使用https:// （或http://，如果他们使用它）

标签： html css image text

【解决方案1】：

你可以这样做：

div#container {
  position: relative;
}

div#container img {
  width: 100vw;
}

div#container p {
  position: absolute;
  font-size: 30px;
  color: #fff;
  z-index: 10;
  top: 10px;
  left: 10px
}

<div id="container">
  <img src="https://wallpapershome.com/images/wallpapers/love-image-2560x1440-8k-21488.jpg" alt="test_img" />
  
  <p> You can put your text here like this ! </p>

<div>

【讨论】：