如何模糊 HTML 中的内容？ [复制]

Question

我想让我的顶部导航透明 (opacity: 0.9) 并且我想让顶部导航背后的背景有点模糊（就像 Apple Inc 在这里所做的那样：)

如何模糊背景？

Answer 1

你可以使用backdrop-filter:

.background {
  background: url(https://picsum.photos/640/240) center/cover;
  width: 600px;
  height: 240px;
  display: flex;
  align-items: center;
  justify-content: center;
}

h1 {
  background-color: rgba(255, 255, 255, 0.2);
  padding: 40px 80px;
  color: white;
  
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

<div class="background">
  <h1>Hello World</h1>
</div>

同时检查supportage