css - 在透明 header 上使用 (-webkit-)backdrop-filter

Question

我想在文本部分透明(使用 rgba)的透明标题上使用 (-webkit-)backdrop-filter 应用背景过滤器。但是，这样做会将滤镜应用于文本的(正方形)背景，而不是将其应用于文本本身后面的背景。

您可以在下面找到我目前正在使用的代码。

如果您想演示此代码，请记住将 background-image: url("images.png"); 链接到实际图像。另请记住，backdrop-filter 仅适用于 Edge、Chrome(版本 76 及更高版本，启用标志时的早期版本)和 Safari(使用 -webkit- 供应商前缀)。

如您所见，我还使用 content 根据屏幕尺寸向页眉添加附加文本。尽管答案不一定与此结合使用，但我们将不胜感激。

<div id="header">
  <h1>Drake</h1>
</div>

<style>
#header {
  height: 100vh;
  width: 100%;
  background-image: url("images.png");
  background-repeat: no-repeat;
  background-position: left;
  background-attachment: fixed;
  background-size: cover;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  margin: 0;
}

#header h1 {
  backdrop-filter: blur(20px) saturate(130%) brightness(300%);
  color: rgba(255, 255, 255, 0.3);
  font-size: calc(75px + 5vw);
  margin: 0;
}

#header h1:after {
  content: " Dragon";
  white-space: pre;
}

@media (max-width:750px) {
  #header h1:after {
    content: " D.";
    white-space: pre;
  }
}

@media (max-width:450px) {
  #header h1:after {
    content: none;
    white-space: pre;
  }
}
</style>

我尝试实现的效果可以在Apple的网站上看到。更具体地说，是关于他们即将推出的“Arcade”服务的页面。在此页面上，副标题具有动态模糊效果。

https://i.imgur.com/aRChGko.png ( https://www.apple.com/apple-arcade/ )

另一方面，我使用的代码并没有实现这种漂亮的模糊效果。它不仅模糊了文本本身，还模糊了文本的背景。

https://i.imgur.com/wfS5vNQ.png ( https://jsfiddle.net/pfe39avr/2/ )

Answer 1

来自 CSS-Tricks 的 Chris Coyier 写了一篇关于如何做到这一点的文章:https://css-tricks.com/a-glassy-and-classy-text-effect/ .下面是一个例子。

<video src="https://css-tricks-post-videos.s3.us-east-1.amazonaws.com/Universe%20-%2013100.mp4" controls muted autoplay loop></video>

<h1 class="headline">
  <span class="visually-hidden">Awesome Headline</span>
  <svg aria-hidden="true" id="lockup-headline-mask" class="headline lockup-headline-mask visually-hidden">
    <clipPath id="lockup-headline-mask-path">
      <text dominant-baseline="hanging" text-anchor="middle" x="50%" y="0em" dy="0.125em">Awesome Headline</text>
    </clipPath>
  </svg>
</h1>

<style>
video {
  object-fit: cover;
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
}

body {
  height: 100vh;
  margin: 0;
  display: grid;
  place-items: center;
  text-align: center;
}
h1 {
  position: relative;
  color: white;
}
.headline {
  width: 100%;
  font: 8vw system-ui, sans-serif;
  font-weight: 900;
  height: 150px;
}
@supports (backdrop-filter: blur(12px)) {
  .visually-hidden {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }
  h1 {
    backdrop-filter: blur(12px);
    background: rgba(white, 0.2);
    clip-path: url(#lockup-headline-mask-path);
  }
}
</style>