模糊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>

堆栈片段甚至都无法识别backdrop-filter CSS属性，即使有an article on MDN，在编辑器中它也被涂成红色：

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

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

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）修复了addind背景色。我只是微调了这些值以获得更好的效果。

Answer 2

好的，所以我尝试了很多事情，这是我所知道的：

• 背景过滤器在Firefox浏览器中无法正常工作（仍然不能很好地支持）。
• 使用 opacity CSS属性，背景过滤器无法正常工作（或无法正常工作）。
• 要使其正常运行（在受支持的浏览器（例如Chrome）中，您必须在背景颜色本身中添加 opacity ，而不是像这样编码它：

background: #000000;
opacity: 0.7;

您会做这样的事情：

background-color: #000000a1;
/* OR */
background-color: hsla(0, 0%, 0%, 0.631);
/* OR */
background-color: rgba(0, 0, 0, 0.631);

我对您的代码进行了一些更改，以使它看起来更加清晰。我删除了红色背景，并添加了带有黑色文本的浅灰色背景，并且还删除了z-index和宽度，并用 padding 替换了它。

因此最终结果将是：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <style>
    * {
      padding: 0;
      margin: 0;
      font-family: Segoe UI, sans-serif;
    }
    
    header {
      position: fixed;
      width: 100%;
      padding: 10px;
      background: rgba(0, 0, 0, 0.692);
      color: white;
      backdrop-filter: saturate(90%) blur(1px);
    }
    
    main {
      background: #eeeeee;
      font-weight: 600;
    }
  </style>
</head>

<body>
  <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>
</body>

</html>