当涉及到绝对定位时，使用另一种方法来填充响应式web设计

Question

因此，我尝试将在div中包装的4行文本定位到图像的某个位置。

​

​

下面是与该图片相关的html和css代码：

    <div class="hero-img">
      <img src="img/welcome-hero.png" alt="Editor with Welcome Message">
      <div class="welcoming-animation">
        <span class="line-1 welcome-text">H</span>
        <span class="line-2 welcome-text">E</span>
        <span class="line-3 welcome-text">L</span>
        <span class="line-4 welcome-text">O</span>
      </div>

    </div>

 // CSS
    .hero-img{
      position:relative;
    }
    .hero-img img{
      display: block;
      margin:auto;
      margin-bottom:-5px;
    }
    .welcoming-animation{
      position:absolute;
      top:35px;
      left:68px;
    }
    .welcome-text{
      display: block;
    }

如图所示，我希望将这行文本放在终端图像的角落，并使其具有响应性。我开始意识到，如果我使用绝对定位，那么让它响应起来将是一件痛苦的事情(每次对窗口进行微小的调整都必须跟踪不同的位置)。

我想问问CSS专家，是否有其他方法可以定位文本的div，以便我可以轻松地使其响应。

Answer 1

一种简单快捷的方法是使用scale() css函数将元素缩小到超过某个断点。

https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scale

此方法可能会导致文本出现抗锯齿问题(略微模糊)，从而使其看起来不太理想。

或者，您可以将欢迎动画div替换为svg并对其进行动画处理。调整大小时，svg将保留其尺寸和位置，因此您不必处理字符的绝对位置。

https://css-tricks.com/animating-svg-css/