css实现背景色高斯模糊

1.实现效果

2.实现原理

1.filter：blur()
2.伪元素设置，不影响子元素显示

3.实现代码

<view class="award a">苏苏小苏苏</view>
<view class="award ">苏苏小苏苏</view>

/* pages/another/filterBlur/index.wxss */
page {
  background: #ffbb5e;
  margin-top: 50px;
}

.award {
  width: 710rpx;
  border-radius: 20rpx;
  margin: 0 auto;
  box-sizing: border-box;
  padding: 73rpx 0 42rpx;
  position: relative;
  min-height: 423rpx;
  font-size: 34rpx;
  font-weight: 500;
  color: #FB962C;
  text-align: center;
}

.award::before {
  content: '';
  background: rgba(255, 245, 237);
  filter: blur(10px);
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
}

.a {
  overflow: hidden;
  margin-bottom: 40px;
}