Question

我正在尝试模糊固定位置标题后面的内容，以便当它背后的内容让用户滚动在这个div后面时模糊不清。

我曾经在CSS中使用简单的不透明度实现了这一点，但这并没有使DIV背后的内容变蓝，只是在它前面设置了一个半透明的面板。

即使它实现了我所追求的目标，也有一种简单的方法。无论是使用PNG背景图像还是使用CSS。

看看iOS7执行此操作的方式http://www.apple.com/ios/ios7/features/。

Answer 1

使用一点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在画布上创建高斯模糊，并且标题元素在.blurheader div上分层以模拟半透明效果。

如果您对JavaScript感到满意，那么这可能值得进一步研究。它支持最新版本的IE，Chrome，Safari和Firefox，并为旧版浏览器提供优雅的后备选项。

干杯。

Answer 2

现在是2015年，Apple发布了Safari 9，它支持新的CSS功能backdrop-filter。在div上使用此CSS规则仅对其背后的元素应用过滤器：

#myDiv {
    backdrop-filter: blur(10px);
}

example

此功能目前仅在Safari中可用（并且需要-webkit前缀才能使用），所以我不建议暂时使用它。如果您这样做，请务必使用@supports或/和JS为尚不支持它的浏览器实施回退：

@supports (backdrop-filter: blur(10px)) {
    #myDiv { background: #181818; }
}

以下是compatibility table at caniuse.com以及Chromium和Firefox功能请求。

详细了解what's new in Safari。

Answer 3

这真的很难。现在你不能像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/

Answer 4

不，你仍然无法模糊某些内容，你需要模糊元素本身。

您正在寻找的答案是Blur Img's & Div's in HTML using CSS

Answer 5

没有＆lt; canvas＆gt;的方法是：

创建包含部分阻止元素的子树的深层克隆。
模糊克隆并定位它，使其堆叠在原始子树的顶部。
将克隆剪辑到阻止元素。
将原始子树剪辑到阻挡元素之外的区域（使用剪辑路径）。

我正在试验这种方法here。执行此操作的代码主要是here。

一些缺点是：

如果更改元素的可见性或修改DOM，则必须更新克隆。
它可以使滚动有点迟缓。
部分封锁元素的克隆必须具有相同的样式才能使其正常工作。

CSS3 / HTML 5 / PNG模糊了元素背后的内容

5 个答案: