我想让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模糊并使其内容像普通文本一样可见？
有什么想法吗？请帮忙.
解决方法@H_404_12@
内容不能在模糊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;
}
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;
}
