微信小程序实现图片虚化(滤镜)效果

主要使用CSS3 filter(滤镜) 属性，代码如下：

 wxml代码：

<view class="bg-group">
    <view class="poster-bg" style="background-image:url('https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3000107020,2519435186&fm=26&gp=0.jpg');"></view>
    <view class="image-wrap">
      <image src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3000107020,2519435186&fm=26&gp=0.jpg" mode="aspectFill" class="img" />
    </view>
</view>

wxss代码：

.bg-group{
  position: relative;
  height: 360rpx;
  overflow: hidden;
}
.poster-bg,.bg-group::after{
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.bg-group::after{
  content: '';
  background-color: rgba(0,0,0, .3);
}
.poste