如何在 CSS 中实现这种“隐藏文本”效果？ [关闭]答案

【问题标题】：How to achieve this 'behind text' effect in CSS? [closed]如何在 CSS 中实现这种“隐藏文本”效果？ [关闭]
【发布时间】：2022-01-25 00:03:57
【问题描述】：

如何使用 CSS 实现这种“文本后”颜色效果？

【问题讨论】：

了解 ::after \ ::before
您可以访问this，使用CSS获得一些很棒的效果。
欢迎来到 StackOverflow！不幸的是，这根本不是您在这里提出正确问题的方式。你都尝试了些什么？ StackOverflow 不是免费的编码服务。您应该先尽最大努力自己解决问题。然后，如果你失败了，请在网上搜索它可能失败的原因。如果您已经完成了所有这些但仍然没有成功，请回到这里，展示您的最佳尝试，解释它是如何失败的以及您的期望。
请拨打tour，访问help center，熟悉How do I ask a good question?和How to create a Minimal, Reproducible Example。

标签： javascript css

【解决方案1】：

<style>
    h1 {
        padding: 30px 0 8px;
        position: relative;
    }
    h1::before {
        content: "";
        position: absolute;
        left: 7%;
        bottom: 16px;
        width: 150px;
        height: 14px;
        transform: skew(-12deg) translateX(-50%);
        background: rgba(238,111,87,0.5);
        z-index: -1;
    }
</style> 
   
<h1>Sahan</h1>

尝试了解CSS::bofre和::after伪元素，以及skew、transform关键字，也许background也会对你有所帮助！

【讨论】：

请不要通过回答来鼓励不符合 SO 标准的低质量问题。

【解决方案2】：

这些是所有示例的粗略实现，大家可以根据需要进行调整。

h1 span {
  color: #FD1215;
  background: #FFE0E0;
  padding: 5px 10px;
  border-radius: 4px;
  font-size: 25px;
}

h2 {
  color: #10284A;
  margin-top: 40px;
  font-size: 25px;
}

h2 span {
  background: #FC6E6B;
  padding: 5px 18px 5px 8px;
  clip-path: polygon(3% 0, 100% 0%, 90% 100%, 0% 100%);
  border-radius: 2px;
  font-size: 25px;
}

h3 {
  color: #353535;
  margin-top: 40px;
  position: relative;
  font-size: 25px;
  z-index: 1;
}

h3 span {
  width: 100px;
  height: 10px;
  background: #FCC183;
 position: absolute;
 bottom: 0px;
 left: 0px;
 z-index: -1;
}

<h1>Reach your own <span>goals</span></h1>

<h2>Accessbility <span>for everyone</span></h2>

<h3>The Benefits <span></span></h3>

【讨论】：

请不要通过回答来鼓励不符合 SO 标准的低质量问题。
@connexo，我会记住这件事，谢谢