在另一个文本上添加文本

Question

我想在另一个文字上添加文字。就像我有一封信＆＃39; A＆＃39;然后会有两个＆＃39; A＆＃39;字母相互重叠。

这是我的代码 -

＆＃13;

＆＃13;

* {
padding: 0;
margin: 0;
}

html,
body {
height: 100%;
}

.container {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background-color: black;
}

span.element {
display: inline-block;
font-size: 45px;
color: #fff;
margin: 0 5px;
}

＆＃13;

<div class="container">
        <span class="element">A</span>
        <span class="element">B</span>
        <span class="element">C</span>
        <span class="element">D</span>
        <span class="element">E</span>
        <span class="element">F</span>
        <span class="element">G</span>
        <span class="element">H</span>
    </div>

＆＃13;

＆＃13;

＆＃13;

如何在文字上添加文字？我尝试使用span创建一个带有两个子跨度的position:absolute，但跨度位于容器之间的左上角。

Answer 1

这是否符合您的要求？

* {
padding: 0;
margin: 0;
}

html,
body {
height: 100%;
}

.container {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background-color: black;
}

span.element {
display: inline-block;
font-size: 45px;
color: #fff;
margin: 0 5px;
text-shadow: 5px 5px white;
}

<div class="container">
        <span class="element">A</span>
        <span class="element">B</span>
        <span class="element">C</span>
        <span class="element">D</span>
        <span class="element">E</span>
        <span class="element">F</span>
        <span class="element">G</span>
        <span class="element">H</span>
    </div>

使用text-shadow属性，可以实现阴影/重叠效果。分配给属性的px越少，它重叠的越多，但也越不明显：

* {
padding: 0;
margin: 0;
}

html,
body {
height: 100%;
}

.container {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background-color: black;
}

span.element {
display: inline-block;
font-size: 45px;
color: #fff;
margin: 0 5px;
text-shadow: 2px 2px white;
}

<div class="container">
        <span class="element">A</span>
        <span class="element">B</span>
        <span class="element">C</span>
        <span class="element">D</span>
        <span class="element">E</span>
        <span class="element">F</span>
        <span class="element">G</span>
        <span class="element">H</span>
    </div>

Answer 2

我会像你写的那样使用position: absolute;。但重要的是

1。）重叠元素是重叠元素的子元素（见下文 - 我嵌套了＆＃34; A＆＃34;跨越第一个跨度内部）和

2。）父元素必须有position: relative;作为绝对定位元素的位置参考点。

＆＃13;

＆＃13;

* {
  padding: 0;
  margin: 0;
}

html,
body {
  height: 100%;
}

.container {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: black;
}

span.element {
  display: inline-block;
  font-size: 45px;
  color: #fff;
  margin: 0 5px;
  position: relative;
}

.x1 {
  position: absolute;
  color: red;
  font-size: 38px;
  top: -3px;
  left: -3px;
}

＆＃13;

<div class="container">
  <span class="element">A<span class="x1">A</span></span>

  <span class="element">B</span>
  <span class="element">C</span>
  <span class="element">D</span>
  <span class="element">E</span>
  <span class="element">F</span>
  <span class="element">G</span>
  <span class="element">H</span>
</div>

＆＃13;

＆＃13;

＆＃13;