css 使用blur，实现背景色高斯模糊，但不影响背景上的内容

实现效果

实现原理

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

  <!-- 库位使用率 --><div class="bkPart statusPart"><div class="co-title">库位使用率</div><div class="pickPos"><div class="pro-num">{{ usePosPercent }}%</div><el-progress :text-inside="true" :stroke-width="30" :percentage="usePosPercent"></el-progress></div></div>

正确的写法：

将元素背景相关的设置用伪元素::before去定义，然后给伪元素设置模糊 blur 即可，下面的代码及运行效果可以看到，极光这两个字没有透明度

 .bkPart::before {background: rgba(220, 232, 244, 0.05);;left: 0;border: 1px solid rgba(255, 255, 255, 0.2);filter: blur(4px);content: '';width: 100%;height: 100%;position: absolute;}.bkPart {font-size: 12px;position: relative;border-radius: 6px;width: 100%;margin: 0 auto;box-sizing: border-box;color: #fff;}

参考链接