我正在尝试模糊固定位置标题后面的内容，以便在该 div 后面有用户滚动的内容后面的内容是模糊的。
我曾经在 CSS 中通过简单的不透明度来实现这一点，但这不会使 DIV 后面的内容变蓝，只是在它前面强加一个半透明面板。
有没有一种简单的方法，即使它是实现我所追求的欺骗。无论是使用 PNG 背景图片还是 CSS。
看看 iOS7 是如何做到这一点的http://www.apple.com/ios/ios7/features/。
【问题讨论】：
稍加一点 HTML5 和 JavaScript 的魔力，答案是肯定的：
http://jsfiddle.net/nallenscott/WtQjY/41/
稻草人：
<body>
<section>
<article>
<header></header>
<div class="blurheader"></div>
<!-- content-->
</article>
</section>
</body>
您需要jQuery、Stackblur 和html2canvas。
复制内容区域并将其转换为画布。
将画布移动到页眉。
将内容的滚动与标题中的画布同步。
html2canvas 创建画布，Stackblur 在画布上创建高斯模糊，header 元素叠加在.blurheader div 上以模拟半透明。
如果您熟悉 JavaScript，那么这可能值得进一步研究。它支持最新版本的 IE、Chrome、Safari 和 Firefox，并为旧版浏览器提供优雅的回退选项。
干杯。
【讨论】：
现在是 2015 年，Apple 发布了支持新 CSS 功能 backdrop-filter 的 Safari 9。在 div 上使用此 CSS 规则仅将过滤器应用于其后面的元素：
#myDiv {
backdrop-filter: blur(10px);
}
此功能目前仅在 Safari 中可用（并且需要 -webkit 前缀才能使用），所以我现在不建议使用它。如果这样做，请务必使用@supports 或/和 JS 为尚不支持它的浏览器实现回退：
@supports (backdrop-filter: blur(10px)) {
#myDiv { background: #181818; }
}
这是compatibility table at caniuse.com，以及Chromium 和Firefox 功能请求。
详细了解what's new in Safari。
【讨论】：
不，你仍然不能模糊某物下面的内容，你需要模糊元素本身。
你要找的答案就在这个问题Blur Img's & Div's in HTML using CSS
【讨论】：
这真的很难。现在你不能像 iOS 那样做，因为你可以模糊或不模糊元素。你不能只模糊它的一部分。
您可以在其他元素上使用 Webkit 的模糊过滤器，但这还不够好。
一个很好的使用方法是：
*:not(.unblurred) {
-webkit-filter: blur(1px);
}
但这并不是在几乎所有情况下都非常理想。
CSS 自定义着色器可能很有前途，也许使用 -moz-element 作为背景，但现在的答案基本上是“运气不好”。
在 Firefox 中尝试http://iamvdo.me/conf/2012/kiwiparty/#/33（单击任意位置）以查看 -moz-element 效果。还不错，但是支持有限，而且很慢。
http://codepen.io/simurai/pen/dFzxL 展示了一个不错的演示，但依赖于提前知道背景图像。
http://webdirections.org/demos/translucency/index.html 是另一个演示，一点也不差。教程是http://www.webdirections.org/blog/creating-ios-7-effects-with-css3-translucency-and-transparency/
【讨论】：