如何使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);
}
推荐答案
感谢您的帮助!我能够将来自所有这里和进一步的Google搜索的信息拼凑在一起,我想出了以下在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");
}
所以mask应用了过滤器。还要注意,对于一个带有< 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".
现在,模糊。
这篇关于如何使CSS玻璃/模糊效果工作的覆盖?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!