html - 在文本之上显示文本

Question

我正在尝试使用 bootstrap4 在文本之上显示文本

我的 HTML 看起来像这样

<div class="d-lg-flex align-items-lg-start intro-heading text-uppercase">
   <span class="text-black-50 d-inline float-none" style="width:749px;filter: blur(2px);margin: 0px;">
  INTRODUCTION</span>
  <span class="text-white d-inline float-none" style="width:749px;filter: blur(0px);color: #ffffff;">INTRODUCTION</span>
</div>

我希望文本不要并排显示，而是显示在其他文本之上，如果有人可以提供帮助，我将不胜感激

Answer 1

你必须给你的包装器position: relative。第二个跨度 position: absolute 和 left: 0。

<div class="d-lg-flex align-items-lg-start intro-heading text-uppercase" style="position: relative">
   <span class="text-black-50 d-inline float-none" style="width:749px;filter: blur(2px);margin: 0px;">
  INTRODUCTION</span>
  <span class="text-white d-inline float-none" style="width:749px;filter: blur(0px);color: #ffffff; position: absolute; left: 0">INTRODUCTION</span>
</div>

您的包装器必须是相对的，因为这样它的所有绝对子级都将使用它作为边界。

而且我强烈建议不要使用内联样式，而是给你的元素类，然后在外部文件中编写 css。它具有可维护性、可重用性、可以被浏览器缓存等优点。