如何在图像上写文字？答案

【问题标题】：How to write text over an image?如何在图像上写文字？
【发布时间】：2020-12-06 05:01:34
【问题描述】：

我想在图像上写一个文本，并且我希望它位于图像的中心这是 HTML 代码：

<div class="cloud d-flex justify-content-center">
    <div class=" col-md-4 col-xs-6 col-sm-6">
        <img  src="./img/CloudB.png" class="img-fluid ">
        <p id="exp">EXPLORE YOUR LANGUAGE </p>
    </div>
</div>

【问题讨论】：

您需要绝对定位p 标签并使用CSS 设置它们的top 和left 属性
您需要文字在图片上方还是图片上？
我不熟悉 Bootstrap，但是如果你可以使用 background-image 使该图像成为包含 div 的背景，那么你可以使用普通的 flexbox 使文本居中（就像你对顶部所做的那样级别 div)。
这能回答你的问题吗？ Positioning text over image (html,css)

标签： html css bootstrap-4

【解决方案1】：

<div>
    <div class='clueless'>
        <img  src="./img/CloudB.png" class="img-fluid ">
        <p id="exp">EXPLORE YOUR LANGUAGE </p>
    </div>
</div>

在css::

.clueless{
  position:relative;
}

img{
  height: 100%;
  width: 100%;
  opacity: 0.8;
}

#exp{
  position:absolute;
  left: 50%;
  top: 50%;
}

你很高兴。我避免了不重要的内联属性。

【讨论】：

【解决方案2】：

短消息在图像上使用position:relative;，在图像上使用position:absolute; 和方向，如left 或right，或者您可以在图像上使用transform。

【讨论】：