css添加配景含糊度：filter、backdrop-filter

须要将这个配景做成有含糊的状态（例子图片有点小，包涵），可以直接通过css的方式实现，以下有两种方式。
一、使用filter:blur(5px)
布局代码：

2. <div class="w-100% h-12.25rem my-0.6rem flex flex-wrap justify-between items-center">
3.     <div class="buttonBg w-48% h-42% flex flex-col justify-center items-center">
4.         <img class="w-2rem h-2rem" src="/img/driver/button-yellow.png" alt="">
5.         <span class="font-400 text-0.875rem color-#ffffff leading-0.9375rem">测试</span>
6.     </div>
7.     <div class="buttonBg w-48% h-42%">
8.          1
9.     </div>
10.     <div class="buttonBg w-48% h-42%">
11.          1
12.     </div>
13.     <div class="buttonBg w-48% h-42%">
14.          1
15.      </div>
16. </div>

复制代码

css代码：

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

复制代码

结果：

直接使用filter:blur(5px)，它会影响配景上的一些元素，如许用不太好，以是我换一种方式。
二、使用backdrop-filter: blur(5px)
html布局一样，直接展示css代码：

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

复制代码

结果：

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