如何在图像上书写文字？

Question

我想在图像上写文本，并且希望它在图像上居中 这是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>

Answer 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%;
}

您很好，我避免了无关紧要的内联属性。

Answer 2

短信 在图像上使用position:relative;并使用position:absolute;和方向，例如left或right，也可以对图像使用transform。