如何将文本放在文本上[关闭]答案

【问题标题】：How do I put a text on a text [closed]如何将文本放在文本上[关闭]
【发布时间】：2020-12-11 09:49:02
【问题描述】：

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

【问题讨论】：

使用 2 个不同的元素并使用 css 设置位置。试着先写你的代码
你的意思是把文字放在图片上吗？
请访问help center，使用tour查看内容和How to Ask。做一些研究，搜索关于SO的相关主题；如果您遇到困难，请发布您尝试的minimal reproducible example，并使用[<>] sn-p 编辑器记录输入和预期输出。

【解决方案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>

Code fiddle

【讨论】：

还有stackoverflow.com/questions/39884260/…

【解决方案2】：

试试这个

<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>

【讨论】：

【解决方案3】：

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

检查：https://www.w3schools.com/howto/howto_css_image_text.asp

.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>

【讨论】：

再次检查，出现一处错误
这只是 CSS 中的设置（您可以尝试更改文本大小、减少边距等...），再检查一下... ROLEPLAY 现在在 GTA 上。