我想让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; }