There is a div . He has a blurred image on the background. How to make the content not have this filter inside it?

 <div class="wrapp"> <div class="child"> Привет </div> </div> .wrapp { width:57%; height:450px; border:1px solid black; background:url(http://s00.yaplakal.com/pics/pics_original/7/8/4/3615487.jpg) no-repeat; -webkit-filter: blur(7px); } .child { font-size:25pt; color:white; }

http://jsfiddle.net/Zkolya_linkoln/agbrzmjy/1/

    1 answer 1

    Not sure that inside this div you can do something. I propose the following solution:

     .wrapp { width:57%; height:450px; border:1px solid black; background:url(http://s00.yaplakal.com/pics/pics_original/7/8/4/3615487.jpg) no-repeat; -webkit-filter: blur(7px); z-index:-1px; } .child { position:absolute; font-size:25pt; color:white; top:10px; left:10px; } 
     <div class="wrapp"></div> <span class="child">Привет</span>