css3提供了filter滤镜，这个属性直接作用于当前元素，而css3 backdrop-filter是让设置这个属性的当前元素背后的元素产生模糊或颜色偏移，相当于透过一个有特殊效果的玻璃看后面的东西，因为它适用于元素背后的所有元素，为了看到效果，必须使元素或其背景至少部分透明：
所有值：
/* 关键词值 */ backdrop-filter: none; /* 指向 SVG 滤镜的 URL */ backdrop-filter: url(commonfilters.svg#filter); /* <filter-function> 滤镜函数值 */ backdrop-filter: blur(2px); backdrop-filter: brightness(60%); backdrop-filter: contrast(40%); backdrop-filter: drop-shadow(4px 4px 10px blue); backdrop-filter: grayscale(30%); backdrop-filter: hue-rotate(120deg); backdrop-filter: invert(70%); backdrop-filter: opacity(20%); backdrop-filter: sepia(90%); backdrop-filter: saturate(80%); /* 多重滤镜 */ backdrop-filter: url(filters.svg#filter) blur(4px) saturate(150%); /* 全局值 */ backdrop-filter: inherit; backdrop-filter: initial; backdrop-filter: revert; backdrop-filter: unset;
语法
none 没有应用于背景的滤镜。
<filter-function-list> 一个以空格分隔的滤镜函数（<filter-function>）或是要应用到背景上的 SVG 滤镜。
示例
CSS
.box {
background-color: rgba(255, 255, 255, 0.3);
border-radius: 5px;
font-family: sans-serif;
text-align: center;
line-height: 1;
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
max-width: 50%;
max-height: 50%;
padding: 20px 40px;
}
html,
body {
height: 100%;
width: 100%;
}
body {
background-image: url(https://picsum.photos/id/1080/6858/4574), linear-gradient(rgb(219, 166, 166), rgb(0, 0, 172));
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
.container {
align-items: center;
display: flex;
justify-content: center;
height: 100%;
width: 100%;
}HTML
<div class="container"> <div class="box"> <p>backdrop-filter: blur(10px)</p> </div> </div>
效果：
