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

最新推荐文章于 2024-07-24 11:19:16 发布

原创

最新推荐文章于 2024-07-24 11:19:16 发布 · 4.2k 阅读

19 ·

CC 4.0 BY-SA版权

文章标签：

#小程序 #css3

本文介绍如何在微信小程序中利用CSS3的filter属性实现图片虚化效果，通过示例代码展示了WXML和WXSS的使用方法，并提供了最终实现的效果图。

主要使用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);
}
.poster-bg{
  filter: blur(20rpx);
  background-size: cover;
  background-position: center;
  transition: background .3s ease-in-out;
}
.image-wrap{
  wi