如何在文本上添加文本

Question

有没有办法在 CSS 或 JS 中将文本放在上面的文本上？

Answer 1

使用父元素relative position并将文本添加为absolute子元素：

.elements {

  position: relative;

}

.outer-element, .inner-element {

  font-size: 60px;

  font-family: verdana;

  font-weight: bold;

}

.outer-element {

  color: blue;

}

.inner-element {

  position: absolute;

  left: 50px;

  top: 35px;

  color: yellow;

}

<div class="elements">

  <div class="outer-element">GTA</div>

  <div class="inner-element">ROLEPLAY</div>

</div>

代码小提琴

Answer 2

是的，您可以使用 CSS 在图像前面添加文本。

.container {

      position: relative;

      text-align: center;

      color: white;

    }

    .firstline {

      position: absolute;

      top: 8px;

      left: 15px;

      font-size: 50px;

      font-weight: bold;

      color: white;

    }

    .secondtline {

      position: absolute;

      top: 22px;

      left: 40px;

      font-size: 70px;

      font-weight: bold;

      color: orange;

    }

<div class="container">

      <img src="https://www.w3schools.com/howto/img_snow_wide.jpg" alt="Snow" style="width:100%;">

      <div class="firstline">GTA</div>

      <div class="secondtline">ROLEPLAY</div>

    </div>

Answer 3

尝试这个

<div style="position:absolute; top:0;left:0;">some text</div>

<div style="position:absolute; top:5;left:5;">some text</div>

<div style="position:absolute; top:10;left:10;">some text</div>

<br/>

<div style="position:absolute; top:110;left:100;">some text</div>

<div style="position:absolute; top:105;left:105;">some text</div>

<div style="position:absolute; top:100;left:110;">some text</div>