我正在尝试使用 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>
我希望文本不要并排显示,而是显示在其他文本之上,如果有人可以提供帮助,我将不胜感激
最佳答案
你必须给你的包装器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。它具有可维护性、可重用性、可以被浏览器缓存等优点。
关于html - 在文本之上显示文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57588148/