在图像中创建文本

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

如果里面的内容是绝对的，容器的位置应该是相对的：

.container {
  position: relative;
}

Answer 2

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

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

.container{position:relative;}

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

Answer 3

我得到了最终答案。我的代码是正确的，但更进一步，我只需要使用 left right top 和 bottom 样式进行更多定位：

.login-box{
   position: absolute;
   top: 3em;
   left: 54%;
   right: 20%;
   text-align: left;
   @media screen and (max-width: 768px){
       background: white;
       position: relative;
       top: 0;
       left: 0;
       width: 90%;
       height: 30em;
       margin: 2em 0;
       padding: 1em;
       }
}

最终结果：

在图像中创建文本

Create text inside an image

html

css

less