CSS3 / HTML 5 / PNG模糊内容背后的元素 [英] CSS3 / HTML 5 / PNG blur content behind element

问题描述

我试图模糊固定位置标题背后的内容，使其背后的内容有用户滚动在此div后面模糊。

在CSS中使用简单的不透明度来实现这一点，但是这不会使DIV后面的内容变蓝，只是在它前面加了一个半透明的面板。

如果它的欺骗实现我的后。无论是使用PNG背景图片还是使用CSS。

查看iOS7执行此操作的方式，以及 Chromium 和 Firefox 功能请求。

详细了解 Safari中的新功能。

I'm trying to blur the content behind a fixed position header so that the content behind it has the user scrolls is blurred when behind this div.

I used to achieve this with simple opacity in CSS but this does not blue the content behind the DIV, merely imposes a translucent panel in front of it.

Is there a simple way even if its a cheat of achieving what I am after. Whether by using a PNG background image or in CSS.

Take a look at the way iOS7 does this http://www.apple.com/ios/ios7/features/.

解决方案

It's 2015 now, and Apple announced Safari 9, which supports a new CSS feature, the backdrop-filter. Using this CSS rule on your div applies filters to elements behind it only:

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

This feature is currently only available in Safari anyway (and the -webkit prefix is required for it to work), so I don't recommend using it for now. If you do so, be sure to make use of @supports or/and JS to implement fallback for browsers that don't support it yet:

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

Here's the compatibility table at caniuse.com, as well as the Chromium and Firefox feature requests.

Learn more about what's new in Safari.

这篇关于CSS3 / HTML 5 / PNG模糊内容背后的元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！