Question

当我调整窗口大小时，我希望我的文本不会移动到图像之外的任何地方。但是当我调整它时，使用此代码会上下徘徊。我的文字是动画，但这不应该对吗？

  .line-1{
    width: 24em;
    margin: 0 auto;
    border-right: 2px solid rgba(255,255,255,.75);
    font-size: 2vw;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    transform: translateY(-50%);
    font-family: 'Bitter', serif;
    color: rgba(255,255,255,.75);
    text-shadow: 3px 3px 	#000000;}

    /* Animation */
    .anim-typewriter{
       animation: typewriter 4s steps(44) 1s 1 normal both,
                 blinkTextCursor 500ms steps(44) infinite normal;
    }
    @keyframes typewriter{
      from{width: 0;}
      to{width: 11em;}
    }
    @keyframes blinkTextCursor{
      from{border-right-color: rgba(255,255,255,.75);}
      to{border-right-color: transparent;}
    }
    
    #image {
      left: 0;
      top: 0;
    }
    #text {
      z-index: 200;
      position: absolute;
      left: 27%;
      top: 25%;
    }

    <center>
          <div>
            <img id="image" src="service.png" alt="ZJ-Automobile Service Angebot"
            height="60%" width="60%" />
            <a href="zjservice.html"><p id="text" class="line-1 anim-typewriter">
              Unser Serviceangebot</p></a>
          </div>
        </center>

html可能错了吗？我真的不明白这里可能出现什么问题。我也是初学者，所以请记住这一点。我尝试以不同的方式提问我。

After resizing

明白我的意思？

Answer 1

简单地说你需要2个区域，1个位置：相对;和1个位置：绝对;

请看一下我用加载图片制作的这个例子，告诉你它是如何工作的。

它想要一些代码链接一个jsfiddle。

  #thisbanner {
  max-width: 700px;
}

演示：https://jsfiddle.net/norcaljohnny/nbfg3gtd/

并非所有演示都在Stack上工作，所以我会尝试在此处添加，如果没有，请参阅上面的Jsfiddle演示链接。

  #thisbanner {
  max-width: 700px;
}

h1 {
  position: absolute;
  display: block;
  width: 80%;
  margin-top: -12%;
  max-width: 610px;
  font-size: 4vw;
  font-family: 'Roboto Slab', Rockwell, Serif;
  font-weight: bold;
  color: #FFF;
  text-shadow: 0 .125em .125em rgba(0, 0, 0, .5);
  padding: .6em 1em .6em 1.7em;
}

.interior-header img {
  display: block;
  position: relative;
  width: 100%;
  height: auto;
  border: 1px solid #b22222;
  padding: 1px;

<div id="thisbanner">
  <div class="interior-header img">
    <div class="headerimage">

      <img src="http://i.stack.imgur.com/i3eqP.jpg" width="630" height="240" alt="Traffic Control" />

      <h1>Traffic Control</h1>
    </div>
  </div>
</div>

如何在响应式图像上叠加文本 - 相应地？

1 个答案: