CSS 使 div 像模糊的镜子一样透明
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20321678/
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
Make a div transparent like a blurred mirror
提问by Raghavendra
I want to make a div background transparent so i used this css
我想让 div 背景透明，所以我使用了这个 css
-webkit-filter: blur(1px);
-moz-filter: blur(1px);
-ms-filter: blur(1px);
-o-filter: blur(1px);
filter: blur(1px);
also see this fiddle: http://jsfiddle.net/LUy3W/
也看到这个小提琴：http: //jsfiddle.net/LUy3W/
I want only the div to be blurred but all the content in that div is also being blurred. How to make only that background div blur and make its content visible like normal text?
我只希望 div 被模糊，但该 div 中的所有内容也被模糊了。如何仅使背景 div 模糊并使其内容像普通文本一样可见？
any thoughts? please help.
有什么想法吗？请帮忙。
回答by koala_dev
The content can't be inside the blurred div, so use a sibling element instead:
内容不能在模糊的 div 内，因此请改用同级元素：
HTML
HTML
<div class="wrapper">
<div class="content">my text</div>
</div>
CSS
CSS
.wrapper {
height:400px;
width:400px;
position: relative;
}
.wrapper::before{
width:100%;
height:100%;
position: absolute;
background-image:url('https://i.imgur.com/iAgdW.jpg');
background-size:cover;
-webkit-filter: blur(4px);
-moz-filter: blur(4px);
-ms-filter: blur(4px);
-o-filter: blur(4px);
filter: blur(4px);
}
.content{
position: absolute;
background-color:red;
}
回答by Mike
This can now be accomplished with a single line of CSS using the backdrop-filterproperty(along with many other filter effects), however browser supportat the time of writing is very poor, so make sure to provide a fallback version for unsupported browsers as well as the -webkit-prefixed version for now.
这现在可以通过使用backdrop-filter属性（以及许多其他过滤器效果）的单行 CSS 来完成，但是在撰写本文时浏览器支持非常差，因此请确保为不受支持的浏览器以及-webkit-现在的前缀版本。
.wrapper {
height: 400px;
width: 400px;
background-image: url('https://i.imgur.com/iAgdW.jpg');
background-size: cover;
}
.inner {
background-color: rgba(255, 0, 0, 0.5);
-webkit-backdrop-filter: blur(5px);
backdrop-filter: blur(5px);
padding: 50px;
}<div class="wrapper">
<div class="inner">my text</div>
</div>The rendered output in supported browsers will look like:
在支持的浏览器中呈现的输出将如下所示：
回答by CRABOLO
For example.
例如。
The html
html
<div class="div-Blur">
<div class="div-inside-blur">
</div>
</div>
The css
css
.div-Blur {
-webkit-filter: blur(1px);
-moz-filter: blur(1px);
-ms-filter: blur(1px);
-o-filter: blur(1px);
filter: blur(1px);
}
edit: try this plse
编辑：请试试这个
.div-inside-blur {
background: blue;
-webkit-filter: blur(0px);
-moz-filter: blur(0px);
-ms-filter: blur(0px);
-o-filter: blur(0px);
filter: blur(0px);
}
