CSS实现背景图片和背景模糊子元素不模糊

首先编写一个div的css样式

#web_bg{
  position:fixed;
  top: 0;
  left: 0;
  width:100%;
  height:100%;
  min-width: 1000px;
  z-index:-10;
  zoom: 1;
  background-color: #cccc;
  background-repeat: no-repeat;
  background-size: cover;
  -webkit-background-size: cover;
  -o-background-size: cover;
  background-position: center 0;
  background-image: url(../images/bg.jpg);
  filter: blur(10px);
}

注意上面的z-index，设置为负数，这样div就会永远处于底层，且div是永远全屏的，这样div就实现了背景图片功能。

在html body元素下面第一行定义div

<div id="web_bg""></div>

不要包含任何子元素。

然后在去写你的html代码。

最终效果：

可以看到背景虽然模糊了，但是子元素并没有