与CSS的背景模糊

我想在我的网站上popup一个Vista / 7-aero-glass风格的效果 ，并且它需要dynamic。 我很好，这不是一个跨浏览器的效果，只要该网站仍然适用于所有现代浏览器。

我的第一个尝试是使用类似的东西 

#dialog_base { background:white; background:rgba(255,255,255,0.8); filter:blur(4px); -o-filter:blur(4px); -ms-filter:blur(4px); -moz-filter:blur(4px); -webkit-filter:blur(4px); }

但是，正如我所预料的那样， 这导致对话的内容模糊 ，背景保持清晰。 有没有什么办法可以使用CSS来模糊半透明元素的背景而不是其内容？

倍频程 2016年更新

由于除了FF之外， -moz-element()属性似乎不被其他浏览器广泛支持，所以应用模糊更容易，而不影响容器内容。 在这种情况下，使用伪元素与svg模糊滤镜相结合是非常理想的。

使用伪元素检查演示

（演示在FF v49，Chrome v53，Opera 40中testing – IE似乎不支持使用css或svgfilter模糊）

在没有js插件的背景下使用模糊效果的唯一方法是使用-moz-element()属性和svg模糊滤镜。 使用-moz-element()您可以将元素定义为另一个元素的背景图像。 然后你应用svg模糊滤镜。 可选：如果背景处于fixed位置，可以使用一些jQuery进行滚动。

在这里看我的演示

我知道这是一个相当复杂的解决scheme，并且仅限于FF（ element()仅适用于Mozilla，但是至less在过去有一些努力在webkit浏览器中实现，希望它将在未来实施。

您可以使用伪元素将背景定位为与背景相同的图像，但会使用新的CSS3滤镜进行模糊处理。

你可以在这里看到它： http : //codepen.io/jiserra/pen/JzKpx

我做了这个自定义一个select，但我添加了模糊背景效果。

从Safari 9.0开始，您可以使用背景滤镜属性。

HTML 

 <div>backdrop blur</div>

CSS 

 div { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }

或者如果您需要不同的浏览器背景色而不支持： 

 div { background-color: rgba(255, 255, 255, 0.9); } @supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) { div { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); background-color: rgba(255, 255, 255, 0.5); } }

的jsfiddle

Mozilla开发者：backdrop-filter

Safari 9.0

有一个简单的和非常常见的技术，使用2个背景图像：一个清晰和模糊的。 您将清晰的图像设置为身体的背景，将模糊的图像设置为您的容器的背景图像。 模糊的图像必须设置为固定位置，alignment是完美的。 我之前使用它，它的工作原理。 

 body { background: url(yourCrispImage.jpg) no-repeat; } #container { background: url(yourBlurryImage.jpg) no-repeat fixed; }

你可以在下面的小提琴看到一个工作的例子： http : //jsfiddle.net/jTUjT/5/ 。 尝试调整浏览器的大小，看看alignment方式永远不会失败。

如果只有CSS element()被Mozilla的-moz-element()以外的其他浏览器支持，那么你可以创build很好的效果。 使用Mozilla查看此演示 。

使用尺寸为内容的空白元素作为背景，并将内容放置在模糊的元素上。 

 #dialog_base{ background:white; background:rgba(255,255,255,0.8); position: absolute; top: 40%; left: 50%; z-index: 50; margin-left: -200px; height: 200px; width: 400px; filter:blur(4px); -o-filter:blur(4px); -ms-filter:blur(4px); -moz-filter:blur(4px); -webkit-filter:blur(4px); } #dialog_content{ background: transparent; position: absolute; top: 40%; left: 50%; margin-left -200px; overflow: hidden; z-index: 51; }

背景元素可以在内容元素的内部，但不能反过来。 

 <div id='dialog_base'></div> <div id='dialog_content'> Some Content <!-- Alternatively with z-index: <div id='dialog_base'></div> --> </div>

如果内容并不总是一致的话，这并不容易，但它是有效的。

你可以通过内联框架…我做了什么，但我现在唯一的问题是同步这些divs同步滚动…其可怕的方式，因为它像你加载2个网站，但唯一的办法，我发现…你也可以使用div和溢出我猜…

你想以哪种方式dynamic？ 如果您希望popup窗口成功映射到背景，则需要创build两个背景。 它需要使用element()或-moz-element()和一个filter（对于Firefox，使用像filter: url(#svgBlur)的SVG过滤filter: url(#svgBlur)因为Firefox不支持-moz-filter: blur() ？）。 它只能在写作时在Firefox中运行。

在这里看到演示。

我仍然需要创build一个简单的演示来展示它是如何完成的。 欢迎您查看来源。

Interesting Posts