设置背景图片模糊，内容不模糊
需求：一个div设置了background-image，现在需要使背景模糊，div内的文字清晰显示。
解决方法：内容和图片分别置于一个div，通过css设置背景div模糊度，设置内容div绝对位置。
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><style type="text/css">.content {color: #ffffff;font-size: 40px;}.bg {background: url('1.jpg');height:600px;text-align: center;line-height: 600px;}.bg-blur {float: left;width: 100%;background-repeat: no-repeat;background-position: center;background-size: cover;-webkit-filter: blur(15px);-moz-filter: blur(15px);-o-filter: blur(15px);-ms-filter: blur(15px);filter: blur(15px);}.content-front {position:absolute;left: 10px;right: 10px;height:600px;line-height: 600px;text-align: center;}</style></head><body><div><div class="bg bg-blur"></div><div class="content content-front">我是内容</div></div></div></body></html>
