CSS3 / HTML 5 / PNG 模糊元素后面的内容
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17380186/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS3 / HTML 5 / PNG blur content behind element
提问by RIK
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.
我试图模糊固定位置标题后面的内容，以便它后面的内容在这个 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.
我曾经在 CSS 中使用简单的不透明度来实现这一点，但这不会使 DIV 后面的内容变蓝，只是在它前面强加了一个半透明面板。
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.
有没有一种简单的方法，即使它是实现我所追求的目标的作弊。无论是使用 PNG 背景图像还是 CSS。
Take a look at the way iOS7 does this http://www.apple.com/ios/ios7/features/.
看看 iOS7 这样做的方式http://www.apple.com/ios/ios7/features/。
采纳答案by Tiago Marinho
It's 2015 now, and Apple announced Safari 9, which supports a new CSS feature, the backdrop-filter. Using this CSS rule on your divapplies filters to elements behind it only:
现在是 2015 年，Apple 发布了 Safari 9，它支持新的 CSS 功能，backdrop-filter. 使用此 CSS 规则div仅将过滤器应用于其后面的元素：
#myDiv {
backdrop-filter: blur(10px);
}
This feature is currently only available in Safari anyway (and the -webkitprefix 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 @supportsor/and JS to implement fallback for browsers that don't support it yet:
此功能目前仅在 Safari 中可用（并且-webkit需要前缀才能工作），因此我现在不建议使用它。如果这样做，请务必使用@supports或/和 JS 为尚不支持它的浏览器实现回退：
@supports (backdrop-filter: blur(10px)) {
#myDiv { background: #181818; }
}
Here's the compatibility table at caniuse.com, as well as the Chromiumand Firefoxfeature requests.
这是caniuse.com上的兼容性表，以及Chromium和Firefox功能请求。
Learn more about what's new in Safari.
详细了解Safari 中的新功能。
回答by nallenscott
With a little HTML5 and JavaScript magic, the answer is yes:
有了一点 HTML5 和 JavaScript 的魔力，答案是肯定的：
http://jsfiddle.net/nallenscott/WtQjY/41/
http://jsfiddle.net/nallenscott/WtQjY/41/
Straw man:
稻草人：
<body>
<section>
<article>
<header></header>
<div class="blurheader"></div>
<!-- content-->
</article>
</section>
</body>
You'll need jQuery, Stackblur, and html2canvas.
您将需要jQuery、Stackblur和html2canvas。
- Duplicate the content area and convert it to canvas.
- Move the canvas to the header.
Sync the scroll of the content with the canvas in the header.
html2canvascreates the canvas,Stackblurcreates a gaussian blur on the canvas, and the header element is layered over the.blurheaderdiv to simulate translucency.
- 复制内容区域并将其转换为画布。
- 将画布移动到标题。
将内容的滚动与标题中的画布同步。
html2canvas创建画布，在画布上Stackblur创建高斯模糊，header 元素在.blurheaderdiv 上分层以模拟半透明。
If you're comfortable with JavaScript, then this might be worth investigating further. It supports the latest versions of IE, Chrome, Safari, and Firefox and permits graceful fallback options for legacy browsers.
如果您对 JavaScript 感到满意，那么这可能值得进一步研究。它支持最新版本的 IE、Chrome、Safari 和 Firefox，并允许为旧浏览器提供优雅的回退选项。
Cheers.
干杯。
回答by Rich Bradshaw
This is really hard. Right now you can't do it the way iOS does, as you can either blur or not blur an element. You can't just blur part of it.
这真的很难。现在你不能像 iOS 那样做，因为你可以模糊或不模糊一个元素。你不能只是模糊它的一部分。
You can use Webkit's blur filter on the other elements, but that's not quite good enough.
您可以在其他元素上使用 Webkit 的模糊过滤器，但这还不够好。
A kinda good way to use that is:
一种很好的使用方法是：
*:not(.unblurred) {
-webkit-filter: blur(1px);
}
But this isn't really ideal in almost every case.
但这在几乎所有情况下都不是很理想。
CSS Custom Shaders are likely promising, as is perhaps using -moz-element as a background, but right now the answer is basically 'hard luck'.
CSS 自定义着色器可能很有前途，因为可能使用 -moz-element 作为背景，但现在的答案基本上是“运气不好”。
Try http://iamvdo.me/conf/2012/kiwiparty/#/33in Firefox (click anywhere) to see the -moz-element effect. It's not bad, but support is limited, and it is very slow.
在 Firefox 中尝试http://iamvdo.me/conf/2012/kiwiparty/#/33（单击任意位置）以查看 -moz-element 效果。还不错，但是支持有限，而且很慢。
http://codepen.io/simurai/pen/dFzxLshows a demo that isn't bad, but relies on having a background image that is known ahead of time.
http://codepen.io/simurai/pen/dFzxL展示了一个不错的演示，但依赖于提前知道的背景图像。
http://webdirections.org/demos/translucency/index.htmlis another demo, which isn't bad at all. Tutorial is http://www.webdirections.org/blog/creating-ios-7-effects-with-css3-translucency-and-transparency/
http://webdirections.org/demos/translucency/index.html是另一个演示，它一点也不差。教程是http://www.webdirections.org/blog/creating-ios-7-effects-with-css3-translucency-and-transparency/
回答by skmasq
No, you still can't blur content underneath something, you need to blur element itself.
不，你仍然不能模糊某些东西下面的内容，你需要模糊元素本身。
The answer you are looking for is in this question Blur Img's & Div's in HTML using CSS
您正在寻找的答案是在这个问题 中使用 CSS 在 HTML 中模糊 Img's & Div's
回答by hagabaka
A way to do it without <canvas> is:
没有 <canvas> 的一种方法是：
- Create a deep clone of the subtree that contains partially blocked elements.
- Blur the clone and position it so it stacks on top of the original subtree.
- Clip the clone to the blocking element.
- Clip the original subtree to areas outside the blocking element (using clip-path).
- 创建包含部分阻塞元素的子树的深层克隆。
- 模糊克隆并将其放置在原始子树的顶部。
- 将克隆剪辑到阻塞元素。
- 将原始子树剪辑到阻塞元素之外的区域（使用剪辑路径）。
I'm experimenting with this method here. The code that does it is mostly here.
Some of the drawbacks are:
一些缺点是：
- If you change the visibility of elements or modify the DOM, you have to update the clones.
- It can make scrolling a little sluggish.
- The clones of partially blocked elements must be styled identically for this to work.
- 如果您更改元素的可见性或修改 DOM，则必须更新克隆。
- 它可以使滚动有点缓慢。
- 部分阻塞元素的克隆必须具有相同的样式才能使其工作。
