其实毛玻璃的模糊效果技术只是用到了 css 滤镜(filter)中的 blur 属性
html
<body>
<div class="content">
<div class="info">
<p>其实毛玻璃的模糊效果技术只是用到了 css 滤镜(filter)中的 blur 属性</p>
<p>其实毛玻璃的模糊效果技术只是用到了 css 滤镜(filter)中的 blur 属性</p>
<p>其实毛玻璃的模糊效果技术只是用到了 css 滤镜(filter)中的 blur 属性</p>
<p>其实毛玻璃的模糊效果技术只是用到了 css 滤镜(filter)中的 blur 属性</p>
<p>其实毛玻璃的模糊效果技术只是用到了 css 滤镜(filter)中的 blur 属性</p>
<p>其实毛玻璃的模糊效果技术只是用到了 css 滤镜(filter)中的 blur 属性</p>
<p>其实毛玻璃的模糊效果技术只是用到了 css 滤镜(filter)中的 blur 属性</p>
</div>
</div>
</body>
css
body {
background:url('./mbl.jpg') center center / cover no-repeat fixed;
}
.content {
height: 400px;
width: 600px;
word-break: break-all;
z-index: 10;
position: absolute;
top: 50%;
left: 50%;
margin-top: -200px;
margin-left: -300px;
overflow: hidden;
}
.content:before {
content: '';
background:url('./mbl.jpg') center center / cover no-repeat fixed;
-webkit-filter: blur(20px);
-moz-filter: blur(20px);
-ms-filter: blur(20px);
-o-filter: blur(20px);
filter: blur(20px);
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: -1;
margin: -30px;
}
.info {
padding: 40px;
color: #fff;
}
效果图: