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

演示小提琴

Answer 2

现在，可以使用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>

在支持的浏览器中呈现的输出将如下所示：

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

编辑：请尝试这个

.div-inside-blur { 
    background: blue; 
    -webkit-filter: blur(0px);
    -moz-filter: blur(0px);
    -ms-filter: blur(0px);
    -o-filter: blur(0px);
    filter: blur(0px); 
 }