html - 模糊背后有内容的 HTML 元素的背景

Question

Vercel.com对他们的标题有很好的效果，它部分不透明并且有模糊效果：

我想在我的网站上的导航栏上重新创建这种效果，但我不确定如何。我试过搜索，但我得到的唯一结果是模糊背景图像。

我尝试检查该站点的 CSS，但我发现唯一有趣的行是backdrop-filter: saturate(180%) blur(5px);，但这似乎没有任何作用，请参阅片段：

与backdrop-filter: saturate(180%) blur(5px);：

* {
  padding: 0;
  margin: 0;
  font-family: Segoe UI, sans-serif;
}

header {
  position: fixed;
  z-index: 999;
  width: 100%;
  height: 30px;
  background: black;
  color: white;
  opacity: 0.7;
  backdrop-filter: saturate(180%) blur(5px);
}

main {
  background: red;
}

<header>
  Header
</header>

<main>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ornare quam viverra orci sagittis eu volutpat odio facilisis. Est ante in nibh mauris cursus mattis molestie. Nisl purus in mollis
  nunc sed. Enim eu turpis egestas pretium aenean pharetra magna ac placerat. Dolor morbi non arcu risus. Malesuada bibendum arcu vitae elementum curabitur vitae nunc. Fames ac turpis egestas maecenas pharetra convallis posuere morbi leo. Est ante in
  nibh mauris cursus mattis molestie. Varius morbi enim nunc faucibus. Volutpat ac tincidunt vitae semper quis. Lectus quam id leo in vitae. Eleifend donec pretium vulputate sapien nec sagittis aliquam malesuada bibendum. Dolor magna eget est lorem ipsum
  dolor sit amet consectetur. Morbi tempus iaculis urna id volutpat lacus laoreet. Elementum integer enim neque volutpat ac tincidunt. Ut pharetra sit amet aliquam id diam. Tincidunt nunc pulvinar sapien et ligula. Rhoncus aenean vel elit scelerisque
  mauris. Nec feugiat nisl pretium fusce id velit ut. Sed odio morbi quis commodo. Id ornare arcu odio ut sem nulla pharetra diam. Consectetur adipiscing elit ut aliquam purus sit amet luctus. Molestie a iaculis at erat pellentesque. Justo eget magna
  fermentum iaculis eu non. Cursus turpis massa tincidunt dui ut. Volutpat maecenas volutpat blandit aliquam. Varius duis at consectetur lorem donec massa sapien faucibus et. Etiam non quam lacus suspendisse faucibus interdum posuere. Aliquet enim tortor
  at auctor urna nunc id. Porta non pulvinar neque laoreet. Ut placerat orci nulla pellentesque dignissim enim sit. Mi sit amet mauris commodo quis imperdiet massa. Elementum facilisis leo vel fringilla est. Non odio euismod lacinia at. Erat pellentesque
  adipiscing commodo elit at imperdiet dui accumsan. Scelerisque purus semper eget duis at tellus. Scelerisque viverra mauris in aliquam sem fringilla. Consequat mauris nunc congue nisi. Vestibulum lectus mauris ultrices eros in cursus turpis massa. Aliquam
  nulla facilisi cras fermentum odio. Tortor pretium viverra suspendisse potenti nullam ac tortor. Bibendum arcu vitae elementum curabitur vitae. Pretium aenean pharetra magna ac. Felis donec et odio pellentesque diam volutpat commodo. Lobortis feugiat
  vivamus at augue eget. Egestas fringilla phasellus faucibus scelerisque. Turpis nunc eget lorem dolor. Congue quisque egestas diam in arcu. Massa tincidunt nunc pulvinar sapien et. Mattis aliquam faucibus purus in massa. Sed enim ut sem viverra. Congue
  quisque egestas diam in arcu cursus euismod quis viverra. Sit amet commodo nulla facilisi nullam vehicula ipsum a. Id eu nisl nunc mi. Penatibus et magnis dis parturient. Condimentum mattis pellentesque id nibh tortor. Mollis aliquam ut porttitor leo
  a. Vulputate dignissim suspendisse in est ante in nibh. Purus sit amet luctus venenatis lectus magna fringilla urna porttitor. Ullamcorper dignissim cras tincidunt lobortis feugiat vivamus at augue eget. Turpis nunc eget lorem dolor sed viverra. Fringilla
  phasellus faucibus scelerisque eleifend donec. Aenean euismod elementum nisi quis eleifend quam adipiscing vitae. Diam vel quam elementum pulvinar etiam non quam lacus. Lacus luctus accumsan tortor posuere ac ut consequat. Posuere morbi leo urna molestie
  at elementum eu facilisis sed. Porta non pulvinar neque laoreet suspendisse interdum consectetur libero. Blandit cursus risus at ultrices mi. Eget nulla facilisi etiam dignissim diam quis. Eleifend donec pretium vulputate sapien nec sagittis aliquam
  malesuada bibendum. Ut sem nulla pharetra diam sit amet. Orci dapibus ultrices in iaculis nunc. Condimentum lacinia quis vel eros. Ultrices eros in cursus turpis. Pretium fusce id velit ut tortor. Lectus proin nibh nisl condimentum id. Feugiat vivamus
  at augue eget arcu. Sem viverra aliquet eget sit amet tellus. Quis lectus nulla at volutpat diam.
</main>

没有backdrop-filter: saturate(180%) blur(5px);：

* {
  padding: 0;
  margin: 0;
  font-family: Segoe UI, sans-serif;
}

header {
  position: fixed;
  z-index: 999;
  width: 100%;
  height: 30px;
  background: black;
  color: white;
  opacity: 0.7;
  /* backdrop-filter: saturate(180%) blur(5px); */
}

main {
  background: red;
}

<header>
  Header
</header>

<main>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ornare quam viverra orci sagittis eu volutpat odio facilisis. Est ante in nibh mauris cursus mattis molestie. Nisl purus in mollis
  nunc sed. Enim eu turpis egestas pretium aenean pharetra magna ac placerat. Dolor morbi non arcu risus. Malesuada bibendum arcu vitae elementum curabitur vitae nunc. Fames ac turpis egestas maecenas pharetra convallis posuere morbi leo. Est ante in
  nibh mauris cursus mattis molestie. Varius morbi enim nunc faucibus. Volutpat ac tincidunt vitae semper quis. Lectus quam id leo in vitae. Eleifend donec pretium vulputate sapien nec sagittis aliquam malesuada bibendum. Dolor magna eget est lorem ipsum
  dolor sit amet consectetur. Morbi tempus iaculis urna id volutpat lacus laoreet. Elementum integer enim neque volutpat ac tincidunt. Ut pharetra sit amet aliquam id diam. Tincidunt nunc pulvinar sapien et ligula. Rhoncus aenean vel elit scelerisque
  mauris. Nec feugiat nisl pretium fusce id velit ut. Sed odio morbi quis commodo. Id ornare arcu odio ut sem nulla pharetra diam. Consectetur adipiscing elit ut aliquam purus sit amet luctus. Molestie a iaculis at erat pellentesque. Justo eget magna
  fermentum iaculis eu non. Cursus turpis massa tincidunt dui ut. Volutpat maecenas volutpat blandit aliquam. Varius duis at consectetur lorem donec massa sapien faucibus et. Etiam non quam lacus suspendisse faucibus interdum posuere. Aliquet enim tortor
  at auctor urna nunc id. Porta non pulvinar neque laoreet. Ut placerat orci nulla pellentesque dignissim enim sit. Mi sit amet mauris commodo quis imperdiet massa. Elementum facilisis leo vel fringilla est. Non odio euismod lacinia at. Erat pellentesque
  adipiscing commodo elit at imperdiet dui accumsan. Scelerisque purus semper eget duis at tellus. Scelerisque viverra mauris in aliquam sem fringilla. Consequat mauris nunc congue nisi. Vestibulum lectus mauris ultrices eros in cursus turpis massa. Aliquam
  nulla facilisi cras fermentum odio. Tortor pretium viverra suspendisse potenti nullam ac tortor. Bibendum arcu vitae elementum curabitur vitae. Pretium aenean pharetra magna ac. Felis donec et odio pellentesque diam volutpat commodo. Lobortis feugiat
  vivamus at augue eget. Egestas fringilla phasellus faucibus scelerisque. Turpis nunc eget lorem dolor. Congue quisque egestas diam in arcu. Massa tincidunt nunc pulvinar sapien et. Mattis aliquam faucibus purus in massa. Sed enim ut sem viverra. Congue
  quisque egestas diam in arcu cursus euismod quis viverra. Sit amet commodo nulla facilisi nullam vehicula ipsum a. Id eu nisl nunc mi. Penatibus et magnis dis parturient. Condimentum mattis pellentesque id nibh tortor. Mollis aliquam ut porttitor leo
  a. Vulputate dignissim suspendisse in est ante in nibh. Purus sit amet luctus venenatis lectus magna fringilla urna porttitor. Ullamcorper dignissim cras tincidunt lobortis feugiat vivamus at augue eget. Turpis nunc eget lorem dolor sed viverra. Fringilla
  phasellus faucibus scelerisque eleifend donec. Aenean euismod elementum nisi quis eleifend quam adipiscing vitae. Diam vel quam elementum pulvinar etiam non quam lacus. Lacus luctus accumsan tortor posuere ac ut consequat. Posuere morbi leo urna molestie
  at elementum eu facilisis sed. Porta non pulvinar neque laoreet suspendisse interdum consectetur libero. Blandit cursus risus at ultrices mi. Eget nulla facilisi etiam dignissim diam quis. Eleifend donec pretium vulputate sapien nec sagittis aliquam
  malesuada bibendum. Ut sem nulla pharetra diam sit amet. Orci dapibus ultrices in iaculis nunc. Condimentum lacinia quis vel eros. Ultrices eros in cursus turpis. Pretium fusce id velit ut tortor. Lectus proin nibh nisl condimentum id. Feugiat vivamus
  at augue eget arcu. Sem viverra aliquet eget sit amet tellus. Quis lectus nulla at volutpat diam.
</main>

Stack Snippets 甚至不识别backdrop-filterCSS 属性，在编辑器中它是红色的，尽管MDN 上有一篇文章：

CSS 属性允许您将backdrop-filter图形效果（例如模糊或颜色转换）应用到元素后面的区域。因为它适用于元素后面的所有内容，所以要查看效果，您必须使元素或其背景至少部分透明。

如何在 CSS 中实现这种模糊的背景效果？

标签： htmlcss

Answer 1

* {
  padding: 0;
  margin: 0;
  font-family: Segoe UI, sans-serif;
}

header {
  position: fixed;
  z-index: 999;
  width: 100%;
  height: 50px;
  background: rgba(255,255,255,.2);
  color: white;
  backdrop-filter: saturate(180%) blur(2px);
}

main {
  background: red;
}

<header>
  Header
</header>

<main>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ornare quam viverra orci sagittis eu volutpat odio facilisis. Est ante in nibh mauris cursus mattis molestie. Nisl purus in mollis
  nunc sed. Enim eu turpis egestas pretium aenean pharetra magna ac placerat. Dolor morbi non arcu risus. Malesuada bibendum arcu vitae elementum curabitur vitae nunc. Fames ac turpis egestas maecenas pharetra convallis posuere morbi leo. Est ante in
  nibh mauris cursus mattis molestie. Varius morbi enim nunc faucibus. Volutpat ac tincidunt vitae semper quis. Lectus quam id leo in vitae. Eleifend donec pretium vulputate sapien nec sagittis aliquam malesuada bibendum. Dolor magna eget est lorem ipsum
  dolor sit amet consectetur. Morbi tempus iaculis urna id volutpat lacus laoreet. Elementum integer enim neque volutpat ac tincidunt. Ut pharetra sit amet aliquam id diam. Tincidunt nunc pulvinar sapien et ligula. Rhoncus aenean vel elit scelerisque
  mauris. Nec feugiat nisl pretium fusce id velit ut. Sed odio morbi quis commodo. Id ornare arcu odio ut sem nulla pharetra diam. Consectetur adipiscing elit ut aliquam purus sit amet luctus. Molestie a iaculis at erat pellentesque. Justo eget magna
  fermentum iaculis eu non. Cursus turpis massa tincidunt dui ut. Volutpat maecenas volutpat blandit aliquam. Varius duis at consectetur lorem donec massa sapien faucibus et. Etiam non quam lacus suspendisse faucibus interdum posuere. Aliquet enim tortor
  at auctor urna nunc id. Porta non pulvinar neque laoreet. Ut placerat orci nulla pellentesque dignissim enim sit. Mi sit amet mauris commodo quis imperdiet massa. Elementum facilisis leo vel fringilla est. Non odio euismod lacinia at. Erat pellentesque
  adipiscing commodo elit at imperdiet dui accumsan. Scelerisque purus semper eget duis at tellus. Scelerisque viverra mauris in aliquam sem fringilla. Consequat mauris nunc congue nisi. Vestibulum lectus mauris ultrices eros in cursus turpis massa. Aliquam
  nulla facilisi cras fermentum odio. Tortor pretium viverra suspendisse potenti nullam ac tortor. Bibendum arcu vitae elementum curabitur vitae. Pretium aenean pharetra magna ac. Felis donec et odio pellentesque diam volutpat commodo. Lobortis feugiat
  vivamus at augue eget. Egestas fringilla phasellus faucibus scelerisque. Turpis nunc eget lorem dolor. Congue quisque egestas diam in arcu. Massa tincidunt nunc pulvinar sapien et. Mattis aliquam faucibus purus in massa. Sed enim ut sem viverra. Congue
  quisque egestas diam in arcu cursus euismod quis viverra. Sit amet commodo nulla facilisi nullam vehicula ipsum a. Id eu nisl nunc mi. Penatibus et magnis dis parturient. Condimentum mattis pellentesque id nibh tortor. Mollis aliquam ut porttitor leo
  a. Vulputate dignissim suspendisse in est ante in nibh. Purus sit amet luctus venenatis lectus magna fringilla urna porttitor. Ullamcorper dignissim cras tincidunt lobortis feugiat vivamus at augue eget. Turpis nunc eget lorem dolor sed viverra. Fringilla
  phasellus faucibus scelerisque eleifend donec. Aenean euismod elementum nisi quis eleifend quam adipiscing vitae. Diam vel quam elementum pulvinar etiam non quam lacus. Lacus luctus accumsan tortor posuere ac ut consequat. Posuere morbi leo urna molestie
  at elementum eu facilisis sed. Porta non pulvinar neque laoreet suspendisse interdum consectetur libero. Blandit cursus risus at ultrices mi. Eget nulla facilisi etiam dignissim diam quis. Eleifend donec pretium vulputate sapien nec sagittis aliquam
  malesuada bibendum. Ut sem nulla pharetra diam sit amet. Orci dapibus ultrices in iaculis nunc. Condimentum lacinia quis vel eros. Ultrices eros in cursus turpis. Pretium fusce id velit ut tortor. Lectus proin nibh nisl condimentum id. Feugiat vivamus
  at augue eget arcu. Sem viverra aliquet eget sit amet tellus. Quis lectus nulla at volutpat diam.
</main>

这是一个工作片段。我认为不透明度打破了背景过滤器。用 rgba(255,255,255,.2) 添加背景颜色修复它。我只是微调了这些值以获得更好的效果。