代码之家 › 专栏 › 技术社区 › Ryuujo dhara gosai

在图像中创建文本

less css html

Ryuujo dhara gosai · 技术社区 · 6 年前

我想在图像中制作文本。我试着遵守规则 w3school 但结果并不令人满意

这是显示的最终结果:

下面的代码是创建的代码数较少的代码:

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>

这是期望的期望:

我忘记了什么以便以后添加?

3 回复 | 直到 6 年前

stealththeninja Jonathan Tuliani - MSFT 6 年前

CSS定位将是满足您期望的正确解决方案。 根据位置规则,父容器应该 位置:相对 子标签应该有 位置:绝对 .

现在,您已经应用了相对于image标记而不是DIV标记的方法。请检查此链接以了解CSS定位方法。 Link

.container{position:relative;}

如果你有任何疑问,请告诉我。

Miguel 6 年前

如果容器内的内容是绝对的,则容器位置应该是相对的:

.container {
  position: relative;
}

Ryuujo dhara gosai 6 年前

我得到了最后的答案。我的代码是正确的,但再往前走一步,我只需要用 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;
       }
}

最终结果: