版权声明：本文为博主原创文章，未经博主允许不得转载。（转载请指明出处） https://blog.csdn.net/zhangjing0320/article/details/90053476
参考： https://www.cnblogs.com/ghost-xyx/p/5677168.html
人家的效果图： https://darylxyx.github.io/Demo/blur
如果你想知道如何一步步这个功能，请看参考链接。
如果你着急用，直接copy我下面的代码就OK了
<body>
<div class="content">
<div class="info">zxczxczxcZXcZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxczxcZXcZXc</div>
</div>
</body>
<style>
body {
background: url("http://pic.58pic.com/58pic/13/17/92/22P58PICYyR_1024.jpg") center center / cover no-repeat fixed;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
.content {
height: 400px;
width: 600px;
word-break: break-all;
z-index: 10;
position: absolute;
top: 50%;
left: 50%;
margin-top: -200px;
margin-left: -300px; // 不能用transform: translate(-50%, -50%)来代替，否则效果不是我们想要的，目前不知原因。
overflow: hidden; // 为防止效果不超出 content 的范围
}
.content:before {
content: '';
background: url("http://pic.58pic.com/58pic/13/17/92/22P58PICYyR_1024.jpg") center center / cover no-repeat fixed;
filter: blur(20px);
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: -1;
margin: -30px; //为解决元素的边缘模糊的效果减弱
}
.info {
padding: 40px;
color: #fff;
}
</style>
结果：
