时间戳

首页 > 解决方案 > HTML如何将文本覆盖在另一个文本上并垂直居中

html - HTML如何将文本覆盖在另一个文本上并垂直居中

问题描述

我是编码新手，我正在尝试将一个文本框放在另一个文本框之上。可以在以下链接中看到我要实现的目标的说明

https://i.stack.imgur.com/Oe7Dn.png

我找到了一些代码，它把文本放在另一个上面

<div style="background:;position: relative;text-align:center;width:100%;">
<div style="color:yellow;position:relative;font-size: 50px;  text-align: center;"><strong>THIS IS PARAGRAPH THIS IS PARAGRAPH
    <div style="color:blue;position:absolute;top:0;width:100%;">hello</div>
</div>

但是我无法根据需要更改它。有什么建议吗？我觉得这应该不难，但由于我的知识目前有限，我没有看到解决方案。

非常感谢您的帮助。

标签： htmlcss

解决方案

我只是将 CSS ::after与背景文本的内容和绝对定位一起使用。

尝试以下并调整值以适合您。也许这也会清理 HTML。

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;800&display=swap');

*{
  padding: 0px;  
  margin: 0px;
 }

section {
  display: flex;
  height: 100vh;
  justify-content: center;
  align-items: center;
}

main {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center; 
  align-items: center;
}

main::after {
  content: "DEALS";
  position: absolute; /* This will break text out of flow */
  z-index:-1;  /* This will place text right at the back */
  font-size: 120px;
  opacity: 0.2;
  font-family: 'Open Sans', sans-serif;
  font-weight: 800;
  
}

.first{
  font-family: 'Open Sans', sans-serif;
  font-weight: 800;
  color: blue;
}

.second{
  font-size: 60px;
  font-family: 'Open Sans', sans-serif;
  font-weight: 600;
  line-height: 45px;
}
<section>
  <main>
    <h3 class="first" style="">The Journey Began</h3>
    <h1 class="second">EXPLORE THE BEST</h1>
  </main>
 </section>

推荐阅读