CSS 背景人物虚化+字体不虚化

CSS 背景人物虚化+字体不虚化

很多时候，设计的背景需要虚化，我们使用到CSS3的属性filter: blur(0.5px);

数值越大，模糊程度越大，图二为图一的模糊，图三图四是优化之后的界面

注意：给div增加模糊，会使得该div里面的所有属性都模糊，包括字体，我们需要将其需要模糊的div单独隔离出来，上部内容使用定位覆盖

HTML

<view style="background-image: url('https://markyo.oss-cn-/mark/4xtR3X5irKTirbNCTHtj.png')" class="back-position"> </view>

CSS

.back-position {background-size: 100%;background-origin: content-box;filter: blur(0.5px);width: 100%;height: 100%;overflow: hidden;border-radius: 25rpx;}