Размытие фона без эффекта div

Question

Как сделать фон размытым, но div является нормальным стилем? Можно ли это сделать?

body 
 
{ 
 
    background-color:#333; 
 
    padding:1px; 
 
    -webkit-filter: blur(5px); 
 
    -moz-filter: blur(5px); 
 
    -o-filter: blur(5px); 
 
    -ms-filter: blur(5px); 
 

 
} 
 
div{ 
 
    height:200px; 
 
    width:200px; 
 
    background:#ccc; 
 
    }

<div>test</div>

Answer 1

Используйте окно тень на DIV:

body{ 
 
    background-color:#333; 
 
    padding:1px; 
 
} 
 
div{ 
 
    height:200px; 
 
    width:200px; 
 
    background:#ccc; 
 
    margin:10px; 
 
    box-shadow: 0 0 10px 10px #ccc; 
 
}

<div>test</div>

Answer 2

Если вы размыть элемент, он будет размывать все содержимое внутри этого элемента, а также (а не только на фоне). Однако вы можете размыть div, в котором есть ваше изображение, и вместо этого разместить свой контент в других элементах рядом с ним.

div.bg{ 
 

 
/* here is just div sizing and positioning */ 
 
    position: absolute; 
 
    top: 0px; 
 
    left: 0px; 
 
    z-index: -1; 
 
    height: 300px; 
 
    width: 500px; 
 

 
/* background image */ 
 
    background: #ccc url('https://farm3.staticflickr.com/2255/2539937014_dc7c24f98a_o.jpg') center center no-repeat; 
 

 
/* blur the element */ 
 
    -webkit-filter: blur(5px); 
 
    -moz-filter: blur(5px); 
 
    -o-filter: blur(5px); 
 
    -ms-filter: blur(5px); 
 
}

<div class="bg"> </div> 
 
<div> 
 
    <h1>No Blur Here</h1> 
 
    <p>More content, not blurred</p> 
 
</div>