Html CSS：如何在模糊的背景上剪切文本

发布于12月11日

我想要重现以下风格

enter image description here

我想出了以下几点

enter image description here

问题是，切割不会影响模糊滤镜，我不知道如何解决它.这是我的HTML码:

.glass {
    width: 40%;
    height: 100%;
    position: absolute;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(50px);
    z-index: 0;
    mix-blend-mode: screen;
    margin-left: auto;
    margin-right: auto;
}

.afri {
    position: absolute;
    top: 410px;
    left: 54%;
}

<div className="glass">
    <div className="trips">
        <h3>AMAZING TRIPS</h3>
    </div>
    <div className="afri">
        <h1>AFRI</h1>
    </div>
</div>

我try 了背景滤镜和混合混合模式:屏幕.我本以为会被砍个满额

推荐答案

您可以使用MASK来实现这一点，但目前仅在Chrome上提供:

.box {
  /* this will do the trick */
  -webkit-mask:
    linear-gradient(#000 0 0),
    linear-gradient(#000 0 0);
  -webkit-mask-clip: text, padding-box;
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  /**/
  backdrop-filter: blur(8px);
  text-transform: uppercase;
  font-size: 80px;
  font-weight: bold;
  background: rgb(0 0 0/50%);
  padding: 20px;
}

body {
  background:url(https://picsum.photos/id/1016/800/300) center/cover;
  padding: 50px 0;
}

html {
  background: #fff;
}