怎么把文字放在图片前面答案

【问题标题】：How to place the text in front of the image怎么把文字放在图片前面
【发布时间】：2020-07-07 10:47:20
【问题描述】：

我是编码初学者，我想把文字放在图片前面。

我正在使用科莫多。这是我的代码：

【问题讨论】：

首先，你可以在img标签上使用css float:left
前面要什么？您可以将<img中的任何文本放入
问题中没有代码。有一张图片，但我所知道的只是“在此处输入图片描述”。请将您的代码作为文本复制并粘贴到问题中，突出显示它，然后按 Ctrl-K 或单击 { } 按钮。
请在下一个问题中编写代码而不是使用图像。关于你的问题，我认为你的 div #contenu 应该是position: relative，在这之后，里面的每个内容都可以是一个position: absolute，你可以用top、left等来控制。试试这个。

【解决方案1】：

我在这里为您提供了一个解决方案，但它可以通过多种不同的方式实现。

.bandeau {
  position: relative;
  text-align: center;
}

h1 {
  position: absolute;
  top: 10%;
  left: 20%;
  color: red;
}
h2 {
  position: absolute;
  top: 25%;
  left: 20%;
  color: red;
}
h3 {
  position: absolute;
  top: 40%;
  left: 20%;
  color: red;
}

<div id="bandeau">
   <div id="contenu">
      <img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_1280.jpg" alt="photo d'aceuil">
      <h1>Pour ma nadette</h1>
      <h2>Mon amoureuse</h2>
      <h3>Je t'aime</h3>
  </div>
</div>

希望能帮到你

【讨论】：

【解决方案2】：

应该就是这样，如果您需要更多帮助，请发表评论。这会将文本放置在图像上并将其置于中心。

<div>
  <img src="">
  <h1>Text</h1> <!-- This will positon text over image -->
</div>

div {
  position: relative;
  text-align: center;
}
image {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

【讨论】：

儿子 insta vm.tiktok.com/sxRJVv" target="_blank" >notre tiktok

Pour nadette

Mon amoureuse

Je t'aime

【解决方案3】：

根据您的标签，这是一个 CSS 解决方案。在你的 <head></head> 标签之间添加这个。

<style>
   #contenu::after {
      content: "words";
   }
</style>

【讨论】：

希望您的意思是<head></head> 标签？另外，请用代码回答好问题。
分号;需要在每一行的末尾。
而且您没有完全按照我的方式复制代码。

Pour nadette

Mon amoureuse

Je t'aime