图片背景虚化处理

背景虚化效果图

HTML部分
<view class="swiper-item">
    //以当前图片为背景进行虚化
   <view class="blur-wrap">
     <view class="blur" :style="{backgroundImage: 'url('+ imgUrl +')'}"></view>
   </view>
   <img mode="widthFix" :src="imgUrl" alt="">
</view>
CSS部分
.swiper-item {
    text-align: center;
    position: relative;
    img{
      max-width: 100%;
      height: 200px;
      position: relative;
    }
}
.blur-wrap {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 16upx;
}
.blur {
  height: 100%;
  filter: blur(10px) brightness(110%) saturate(95%);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

 1,170 total views,  8 views today

Revisions

Comments are closed.