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

最新推荐文章于 2024-12-31 08:17:52 发布

蓝胖子的多啦A梦

最新推荐文章于 2024-12-31 08:17:52 发布

阅读量3.5k

点赞数

CC 4.0 BY-SA版权

文章标签： css javascript 前端

本文链接：https://blog.csdn.net/Maxueyingying/article/details/129987188

文章介绍了如何利用CSS的filter属性和伪元素技术来实现背景模糊效果，同时确保不影响子元素的显示。示例代码展示了在不改变子元素透明度的情况下，通过`.bkPart::before`设置模糊背景的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实现效果

在这里插入图片描述

实现原理

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