具有透明度的 CSS 模糊背景(就像在 iOS7 中一样)

Question

这适用于固定在顶部且主体的其余部分在其下方滚动的网站标题。

到目前为止，我设法让透明度发挥作用；但是，我确实想模糊标题的背景，因此当其余内容在其下方滚动时，内容看起来很模糊。这可能吗？

我试图实现的外观就像在 iOS 7 上一样。它们的新工具栏具有相同的效果。

#headerWrapperBackground {
    width: 100%;
    height: 100px;
    z-index: 9998;
    position: fixed;
    background-color: #222;
    background-color: rgba(34, 34, 34, 0.95);

}

#headerWrapper {
    background-color: transparent;
    margin: auto;
    text-align: center;
    position: fixed;
    z-index: 9999;
    width: 100%;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 5px 3px;
}

Answer 1

试试这个

<svg height="110" width="110">
  <defs>
    <filter id="f1" x="0" y="0">
      <feGaussianBlur in="SourceGraphic" stdDeviation="15" />
    </filter>
  </defs>
  <rect width="90" height="90" stroke="green" stroke-width="3" fill="gray" filter="url(#f1)" />
</svg>