寒假比赛总结(五) - 基于现有解决方案实现背景虚化

前言我对目前比较成熟的背景虚化方案还不是很熟悉,但是这次比赛项目需要用到这个功能,具体体现在使用虚化的用户头像当作头像展示的背景,类似于下图:采用这种方法的好处就是在保证大体美观的情况下减轻研发量(因为减去了用户上传背景图片的功能)。解决方案1.基于CSS3的高斯模糊滤镜此方案具体实现就是类似于实现毛玻璃特效的blur()滤镜,通过叠加背景图片达到高斯模糊效果。此方案我最开始是在Lea Verou所著的《CSS揭秘》一书中发现的,并且作者最初也是为了实现毛玻璃特效使用了高斯模糊。之所以认为它可以用于实现这个需求,是因为其本质是背景图片模糊。过程建立一个容器,宽高指定,指定所需背景图片:HTML<div class="head-wrapper" :style="{background: `url(../../../static/images/${this.avatar})`}"> Less.head-wrapper { min-height: 161px; height: auto; width: 100%; position: relative; background-repeat: no-repeat !important; background-size: 80% !important; background-position:…