如何使叠加的CSS玻璃/模糊效果工作？ [英] How can I make a CSS glass/blur effect work for an overlay?

问题描述

我在半透明重叠div上应用模糊效果时遇到问题。我想让div后面的一切都变得模糊，像这样：

I am having trouble applying a blur effect on a semi-transparent overlay div. I'd like everything behind the div the be blurred, like this:

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

Here is a jsfiddle which doesn't work: http://jsfiddle.net/u2y2091z/

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

Any ideas how to make this work? I'd like to keep this as uncomplicated as possible and have it be cross-browser. Here is the CSS I'm using:

#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);
}

推荐答案

感谢您的帮助！我能够从这里的所有人和进一步的谷歌搜集信息，我想出了以下在Chrome和Firefox的工作原理： http： //jsfiddle.net/u2y2091z/12/ 。我仍然在努力为IE和Opera做这项工作。

Thank you for the help everyone! I was able to piece together information from everyone here and from further Googling, and I came up with the following which works in Chrome and Firefox: http://jsfiddle.net/u2y2091z/12/. I'm still working on making this work for IE and Opera.

关键是将内容放在div的过滤器应用：

The key is putting the content inside of the div to which the filter is applied:

<div id="mask">
    <p>Lorem ipsum ...</p>
    <img src="http://www.byui.edu/images/agriculture-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");
}

还要注意，对于一个带有< svg> 标签的过滤器，使用url（）这个想法来自 http://codepen.io/AmeliaBR/pen/xGuBr 。如果你碰巧缩小你的CSS，你可能需要用％20替换SVG过滤器标记中的任何空格。

So mask has the filters applied. Also note the use of url() for a filter with an <svg> tag for the value -- that idea came from http://codepen.io/AmeliaBR/pen/xGuBr. If you happen to minify your CSS, you might need to replace any spaces in the SVG filter markup with "%20".

现在，mask div中的所有内容模糊。

So now, everything inside the mask div is blurred.

这篇关于如何使叠加的CSS玻璃/模糊效果工作？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！