模糊背景没有影响div

Question

如何使背景模糊但div是正常风格？那可能吗？

＆＃13;

＆＃13;

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;
  }

＆＃13;

<div>test</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

如果您模糊元素，它也会模糊该元素中的所有内容（而不仅仅是背景）。但是，您可以模糊包含图像的div，并将内容放在其旁边的其他元素中。

＆＃13;

＆＃13;

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);
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

在DIV上使用框阴影：

＆＃13;

＆＃13;

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

＆＃13;

<div>test</div>

＆＃13;

＆＃13;

＆＃13;