首先看一下要实现的效果：
分析一下，这个效果需要两层结构（实现的方式非常多，我就抛砖引玉一下）
1.模糊背景，那么肯定要有一层模糊的背景嘛
filter: blur(10px);模糊背景由这个属性实现
2.图片+黑色的图层 这一层
黑色图层由rgba实现
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; padding: 0; } #wrap{ position: relative; height: 200px; width: 100%; border: 1px solid; } #wrap div{ width: 100%; height: 100%; } #bg{ position: absolute; background-image: url(zdy.jpg); background-size: 100% 100%; filter: blur(10px); } #black{ box-sizing: border-box; padding: 40px 40px; position: absolute; background-color: rgba(0,0,0,0.5); } </style> </head> <body> <div id="wrap"> <div id="bg"></div> <div id="black"> <img src="zdy.jpg" width="80px"> </div> </div> <script></script> </body> </html>
box-sizing: border-box；是为了在设置padding的时候内容区域不溢出父元素 ，因为padding会影响可见框的大小。
如果使用margin就不需要这个属性啦。