html - 在图像中创建文本

Question

我想在图片中制作文字。我已尝试遵守 w3school 中的规则却没有表现出令人满意的效果

这是显示的最终结果:

下面的代码是创建的 LESS 代码:

body {
  background: url("../img/background-blur-5px.jpg") no-repeat top right fixed;
  .container{
    position: relative;
    .img-bg {
      margin: auto auto;
      display: block;
      width: 70%;
      position: relative;
      @media screen and (max-width: 768px){
        display: none;
      }
    }
    .login-box{
      position: absolute;
      text-align: center;
      @media screen and (max-width: 768px){
        background: white;
        width: 90%;
        height: 30em;
        margin: 2em 0;
        padding: 1em;
      }
    }
  }
}

这是创建的 HTML 代码:

<div class="container">
  <img src="{{url('image/sbopays')}}/login-box.png" class="img-bg">
  <div class="login-box">
    Hello World
  </div>
</div>

这是期望值:

我忘记了什么以便稍后添加？

Answer 1

CSS 定位将是满足您期望的正确解决方案。根据位置规则，父容器应具有 position: relative，子标签应具有 position:absolute。

现在您已经应用了相对于图像标签而不是 div 标签。请检查此链接以了解 CSS 定位方法。 Link

.container{position:relative;}

如果您有任何疑问，请告诉我。