css3 – 使div像透明模糊镜子一样透明

前端之家收集整理的这篇文章主要介绍了css3 – 使div像透明模糊镜子一样透明前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我想让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模糊并使其内容像普通文本一样可见?

有什么想法吗?请帮忙.

解决方法

内容不能在模糊div内,因此请使用兄弟元素:

HTML

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

CSS

.wrapper {
    height:400px;
    width:400px;
    position: relative;
}
.blur {
    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

猜你在找的CSS相关文章