css添加背景模糊度filterbackdrop-filter

2025-03-11 约 398 字预计阅读 1 分钟

https://bing.ee123.net/img/rand?artid=146183785

css添加背景模糊度：filter、backdrop-filter

需要将这个背景做成有模糊的状态（例子图片有点小，见谅），可以直接通过css的方式实现，以下有两种方式。

一、使用filter:blur(5px)

结构代码：

<div class="w-100% h-12.25rem my-0.6rem flex flex-wrap justify-between items-center">
    <div class="buttonBg w-48% h-42% flex flex-col justify-center items-center">
        <img class="w-2rem h-2rem" src="/img/driver/button-yellow.png" alt="">
        <span class="font-400 text-0.875rem color-#ffffff leading-0.9375rem">测试</span>
    </div>
    <div class="buttonBg w-48% h-42%">
         1
    </div>
    <div class="buttonBg w-48% h-42%">
         1
    </div>
    <div class="buttonBg w-48% h-42%">
         1
     </div>
</div>

css代码：

.buttonBg {
  background: linear-gradient(180deg, rgba(0, 120, 247, 0.27) 0%, rgba(0, 120, 247, 0) 100%);
  box-shadow: inset 0px 0px 50px 0px rgba(54, 128, 255, 0.2);
  border-radius: 0px 0px 0px 0px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  filter: blur(5px);
}

效果：

直接使用filter:blur(5px)，它会影响背景上的一些元素，这样用不太好，所以我换一种方式。

二、使用backdrop-filter: blur(5px)

html结构一样，直接展示css代码：

.buttonBg {
  background: linear-gradient(180deg, rgba(0, 120, 247, 0.27) 0%, rgba(0, 120, 247, 0) 100%);
  box-shadow: inset 0px 0px 50px 0px rgba(54, 128, 255, 0.2);
  border-radius: 0px 0px 0px 0px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(5px);
}

效果：

嗯，效果还行，就这个了。

目录

css添加背景模糊度filterbackdrop-filter

css添加背景模糊度：filter、backdrop-filter