在 div 上方但在文本下方分层图像？答案

【问题标题】：Layer an image above a div but below text?在 div 上方但在文本下方分层图像？
【发布时间】：2020-06-26 22:45:43
【问题描述】：

上面显示了我目前的进度^

目前，我有一个纯黑色和圆角的 div 背景

在上面/里面，我想添加你在文本上方看到的图像

然后是上面的文本和间隔图像

如果我知道如何将其设为纯文本，我会分享我当前的代码，所以这里有一个 pdf

https://myucdsb-my.sharepoint.com/:b:/g/personal/belle_fortin_my_ucdsb_ca/EeSBkmriyvtFjYZAvWpOCWcB0gI6FATRPhfzwPAMZPR-nA?e=o4Skxx

【问题讨论】：

您应该将所有信息添加到此帖子中，而不是指向其他网站的链接，这样每个人都可以更轻松地了解您的问题，而无需打开任何其他网站。

标签： html css templates

【解决方案1】：

回答编辑：注意：请记住，HTML 从上到下读取。意思是，所有单词都在图像下方的原因是因为在您的代码中图像首先出现，然后是文字。所以我所做的就是将文字从图像下方移动到图像上方。谢谢

<div style="border-radius: 25px; background:#000000; padding: 25px; width: 500px; margin:auto;">
      <div class="container">
        <center>
          <div style="color:#5ce600; font-size: 30px; text-shadow: 0px 0px 8px #66ff00; font-family:Apple Chancery;">ANALA</div>
          <div style="color:#5ce600; font-family: Apple Chancery, cursive; font-size: 20px;">From a sparkto a flame</div>
          <img src="https://i.imgur.com/ioaINSW.gif">
        </center>
        <p style="font-size: 14px; font-family: Times, Times New Roman, serif;color:#ff9933; text-align: center;">Main body text here!</p>
        <center>
          <img src="https://i.imgur.com/ioaINSW.gif" style="display: block;">
          <OOC style="font-size: 14px; font-family: Times, Times New Roman, serif; color:#5ce600;">OOCNotes:</OOC>
        </center>
        <img src="https://i.ibb.co/tHJX2sW/70005cc22fe3a833cb0bd3343612223b-cool-fire-red-aesthetic.jpg" alt="Match" style="width:100%;">
      </div>
    </div>

【讨论】：

关闭！我希望主体文本出现在图像上方而不是下方。谢谢！
不用担心，轻松解决！阅读编辑后的答案。谢谢
这似乎将图像放在表格的最底部，而不是我运行它时的文本后面？