添加模糊效果demo:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> <title>模糊背景</title> <style type="text/css"> *{ padding:0; margin:0; } html,body{ height:100%; } .wrap{ min-height:100%; } .mian{ } .content{ height:100px; position:relative; overflow:hidden; } .content .text{ color:#fff; padding:10px; } .background{ position:absolute; top:0; left:0; 100%; height:100%; z-index:-1; background:url("./images/bg.jpg") center center no-repeat; background-size:100% 100; filter:blur(10px) } </style> </head> <body> <div class="wrap"> <div class=main> <div class="content"> <div class="text">我是内容</div> <div class="background"></div> </div> </div> </div> </body> </html>