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

yeotifhr 于 2022-12-15 发布在其他

关注(0)|答案(1)|浏览(134)

我想重新创造以下的风格

我想到了以下内容

问题是剪切不影响模糊滤镜，我不知道如何解决这个问题。这是我的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>

我尝试了一个背景过滤器和混合混合模式：屏幕我以为是全切的

css

来源：https://stackoverflow.com/questions/74757393/css-how-to-cut-out-text-on-a-blurred-background

1条答案

按热度按时间

busg9geu1#

你可以使用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;
}

<div class="box">Text</div>

赞(0）回复(0）举报 2022-12-15

我来回答

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

1条答案

相关问题

热门标签

最新问答