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

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

很多时候，设计的背景需要虚化，我们使用到CSS3的属性filter: blur(0.5px);
数值越大，模糊程度越大，图二为图一的模糊，图三图四是优化之后的界面

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

HTML

<view style="background-image: url('https://markyo.oss-cn-shanghai.aliyuncs.com/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;
}