主页 / user-30102996

Warby's questions

Martin Hope
Warby
Asked: 2025-04-05 07:42:41 +0800 CST
  • 6

我试图将<p>元素中的字母重叠，左侧字母在上方，我尝试将每个字母放在一个范围内并设置 z-index，但这似乎不起作用，CodePen。我希望左侧字母位于右侧字母的上方。

我该如何让左上角的字母与右下角的字母重叠呢？

代码：

@font-face {
  font-family: 'CloudySunday';
  src: url('https://fritzfromtechsupport.com/fonts/CloudySunday.ttf') format('truetype');
}
<div>
  <p style="letter-spacing: -0.8rem;font-family: 'CloudySunday';">
    <span style="z-index: 1000;color: green;font-size: 70px;filter: drop-shadow(0px 2px black) drop-shadow(0 -2px black) drop-shadow(2px 0 black) drop-shadow(-2px 0 black);">
  h
</span>
    <span style="z-index: 100;color: red;font-size: 70px;filter: drop-shadow(0px 2px black) drop-shadow(0 -2px black) drop-shadow(2px 0 black) drop-shadow(-2px 0 black);">
  i
</span>
  </p>
</div>

html