Html 如何在图像上书写文本？

我想在图像上写一个文本，我想它在图像上居中 这是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>

探索您的语言

你可以走了。我避免了不重要的内联属性

你可以走了。我避免了不重要的内联属性。

短消息 使用

位置：相对并使用
位置：绝对和方向，如
左
或
右
，或者您可以使用
变换
进行图像处理。
短消息
使用
位置：相对并使用
位置：绝对和方向，如
left
或
right
或您可以使用
transform
对图像进行编码。
您需要绝对定位
p
标签，并使用CSS设置其
top
和
left
属性。您需要图像上方或图像上的文本吗？我引导不太流利，但是，如果您可以使用
背景图像
将该图像设置为包含div的背景，那么您可以使用普通flexbox将文本居中（就像处理顶级div一样）。这是否回答了您的问题？您需要绝对定位
p
标记，并使用CSSDo设置其
top
和
left
属性是否需要图像上方或图像上的文本？我不擅长引导，但如果您可以使用
background image
将该图像设置为包含div的背景，然后，您可以使用普通flexbox将文本居中（就像处理顶级div一样）。这是否回答了您的问题？
<div>
    <div class='clueless'>
        <img  src="./img/CloudB.png" class="img-fluid ">
        <p id="exp">EXPLORE YOUR LANGUAGE </p>
    </div>
</div>

.clueless{
  position:relative;
}

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

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