当前位置：首页 > article >正文

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

article 2024/11/14 12:43:11

实现效果

在这里插入图片描述

实现原理

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;
  }