我怎样才能使覆盖层的CSS玻璃/模糊效果工作？

我无法在半透明的叠加div上应用模糊效果。 我希望div背后的一切都被模糊，像这样：

这是一个不工作的jsfiddle： http : //jsfiddle.net/u2y2091z/

任何想法如何使这项工作？ 我想保持这个尽可能简单，并使其跨浏览器。 这是我正在使用的CSS：

#overlay { position: absolute; left: 0; top: 0; right: 0; bottom: 0; background:black; background:rgba(0,0,0,0.8); filter:blur(4px); -o-filter:blur(4px); -ms-filter:blur(4px); -moz-filter:blur(4px); -webkit-filter:blur(4px); } 

Answer 1

这里是一个使用svgfilter的例子。

这个想法是使用一个height与#overlay相同的svg元素，并在其上应用feGaussianblurfilter。 此filter应用于svg image元素。 为了给它一个挤压的效果，你可以在叠加层的底部使用一个box-shadow 。

浏览器支持svgfilter 。

在Codepen上演示

 body { background: #222222; } #container { position: relative; width: 450px; margin: 0 auto; } img { height: 300px; } #overlay { position: absolute; left: 0; top: 0; width: 100%; z-index: 1; color: rgba(130, 130, 130, 0.5); font-size: 50px; text-align: center; line-height: 100px; box-shadow: 0 3px 5px rgba(0, 0, 0, 0.3); } 

 <div id="container"> <img src="http://lorempixel.com/450/300/sports" /> <div id="overlay">WET</div> <svg width="450" height="100" viewBox="0 0 450 100" style="position: absolute; top: 0;"> <defs> <filter id="blur"> <feGaussianBlur in="SourceGraphic" stdDeviation="3" /> </filter> </defs> <image filter="url(#blur)" xlink:href="http://lorempixel.com/450/300/sports" x="0" y="0" height="300px" width="450px" /> </svg> </div> 

Answer 2

感谢大家的帮助！ 我能够将所有人的信息拼凑在一起，并从谷歌进一步search，我想出了以下在Chrome和Firefox中的作品： http : //jsfiddle.net/u2y2091z/12/ 。 我仍然在为IE和Opera做这个工作。

关键是把内容的filter应用到div的内部 ：

 <div id="mask"> <p>Lorem ipsum ...</p> <img src="http://www.byui.eduhttp://img.dovov.comagriculture-life-sciences/flower.jpg" /> </div> 

然后CSS：

 #mask { position: absolute; left: 0; top: 0; right: 0; bottom: 0; background-color: black; opacity: 0.5; filter: blur(10px); -webkit-filter: blur(10px); -moz-filter: blur(10px); -o-filter: blur(10px); -ms-filter: blur(10px); filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='svgMask'><feGaussianBlur stdDeviation='10' /></filter></svg>#svgMask"); } 

所以掩码有应用的filter。 另外请注意，对于具有<svg>标记的filter，使用url（）作为值 – 这个想法来自http://codepen.io/AmeliaBR/pen/xGuBr 。 如果您碰巧缩小了CSS，则可能需要用“％20”replaceSVG滤镜标记中的所有空格。

所以现在，mask div里面的东西都模糊了。

Answer 3

这是一个可能的解决scheme。

HTML

 <img id="source" src="http://www.byui.eduhttp://img.dovov.comagriculture-life-sciences/flower.jpg" /> <div id="crop"> <img id="overlay" src="http://www.byui.eduhttp://img.dovov.comagriculture-life-sciences/flower.jpg" /> </div> 

CSS

 #crop { overflow: hidden; position: absolute; left: 100px; top: 100px; width: 450px; height: 150px; } #overlay { -webkit-filter:blur(4px); filter:blur(4px); width: 450px; } #source { height: 300px; width: auto; position: absolute; left: 100px; top: 100px; } 

我知道CSS可以简化，你可能应该摆脱ID。 这里的想法是使用div作为裁剪容器，然后在图像的副本上应用模糊。 小提琴

为了使这个工作在Firefox，你将不得不使用SVG黑客 。

Answer 4

如果您今天正在寻找可靠的跨浏览器方法，您将找不到一个好的。 你有最好的select是创build两个图像（这可以在一些环境中自动），并安排他们覆盖另一个。 我在下面创build了一个简单的例子：

 <figure class="js"> <img src="http://i.imgur.com/3oenmve.png" /> <img src="http://i.imgur.com/3oenmve.png?1" class="blur" /> </figure> 

 figure.js { position: relative; width: 250px; height: 250px; } figure.js .blur { top: 0; left: 0; position: absolute; clip: rect( 0, 250px, 125px, 0 ); } 

虽然有效，但这种方法不一定是理想的。 这就是说，它确实产生了预期的结果 。