关注filter:blur的问题，如何只使得一个div里面的bgimg模糊，其他不模糊

Question

想做一个类似酷狗播放界面的背景图片模糊，可是用filter:blur会使得所有元素模糊，

Answer 1

目前只有safari支持这样的模糊，对应的css属性是-webkit-backdrop-filter: blur(10px)，你可以在mdn上查看详细的用法mdn，不止可以模糊，可以添加很多很有意思的效果。

如果你只需要静态的背景模糊效果，还是有很多polyfill的，比如http://sitecoreandmore.blogsp...，或者https://codepen.io/jonitrytha...

Answer 2

很简单，首先html结构如下：

<div 外层div>
    <div 图片div> 本div进行设置背景图片，设置模糊效果，然后浮动、高度、宽度设置成100%，充满外层div即可，z-index=1（底层） </div>
    <div 内容div> 本层div也浮动、高度、宽度设置为100%，充满外层div，z-index=9（上层） </div>
</div>

这是最基本静态模糊实现方法。动态模糊（-webkit-backdrop-filter）现在只有新iOS和新MacOS的Safari支持。