使div透明，就像模糊的镜子一样

Question

我想让div背景透明，所以我用这个css

-webkit-filter: blur(1px);
-moz-filter: blur(1px);
-ms-filter: blur(1px);
-o-filter: blur(1px);
filter: blur(1px);

也看到这个小提琴：http://jsfiddle.net/LUy3W/

我只想让div模糊，但div中的所有内容也都模糊了。如何只使背景div模糊并使其内容像普通文本一样可见？

有什么想法吗？请帮忙。

Answer 1

内容不能位于模糊div内，因此请使用兄弟元素：

HTML

<div class="wrapper">
    <div class="content">my text</div>
</div>

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

Demo fiddle

Answer 2

现在可以使用backdrop-filter property（以及许多其他filter effects）使用单行CSS来完成，但是在撰写本文时browser support非常差，因此请确保为不受支持的浏览器提供后备版本以及-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>

支持的浏览器中的渲染输出如下所示：

Answer 3

例如。

HTML

<div class="div-Blur">
    <div class="div-inside-blur">
    </div>
</div>

css

.div-Blur {
    -webkit-filter: blur(1px);
    -moz-filter: blur(1px);
    -ms-filter: blur(1px);
    -o-filter: blur(1px);
    filter: blur(1px);
}

编辑：尝试这个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); 
 }