注:高斯模糊是给弹框后面的页面内容添加模糊,添加对象错误将无效
<image src='https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1563191496238&di=21d2f25a30afc5cf2d154654cb0f536d&imgtype=0&src=http%3A%2F%2Fpic32.nipic.com%2F20130810%2F7772606_170808427000_2.jpg' mode='widthFix' class='bg_pic'></image>
<!-- 背景高斯模糊图片 -->
<view class='pic_'>
<image src='https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1562819349252&di=da8c10500bc633024f5b33888941ade0&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201606%2F10%2F20160610121636_i2EWn.jpeg' mode='aspectFill' class='pic'></image>
</view>
CSS:
.bg_pic {
position: fixed;
top: 25vh;
left: 10vw;
width: 80vw;
z-index: 999;
}
.pic_ {
position: fixed;
display: block;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
-webkit-filter: blur(20px);
-moz-filter: blur(20px);
-ms-filter: blur(20px);
-o-filter: blur(20px);
filter: blur(20px);
z-index: 99;
overflow: hidden;
}
.pic_ .pic {
width: 100vw;
height: 100vh;
}
附图: