<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>高斯模糊背景</title> <style> .bg{ background-image:url(../images/1.jpg); width:100%; height:750px; line-height:750px; } .bg-blur{ float:left; background-position:center; background-repeat:no-repeat; background-size:cover; -webkit-filter: blur(9px); -moz-filter: blur(9px); -o-filter: blur(9px); -ms-filter: blur(9px); filter:blur(9px); } .content{ font-size:50px; color:#555; font-weight:bold; } .font-content{ position:absolute; width:700px; height:700px; margin:20px; text-align:center; line-height:700px; left:50%; top:50%; transform: translate3d(-50%,-50%,0); /* border:2px solid red; */ } </style> </head> <body> <div> <div class="bg bg-blur"></div> <div class="content font-content">今天是植树节，你植树了吗？</div> </div> </body> </html>
效果如下：
