backdrop-filter CSS 属性可以让你为一个元素后面区域添加图形效果（如模糊或颜色偏移）。 因为它适用于 元素背后的所有元素，为了看到效果，必须使元素或其背景至少部分透明。
/* 关键词值 */
backdrop-filter: none;
/* SVG 过滤器 */
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: unset;
{
-webkit-backdrop-filter: blur(5px);
backdrop-filter: blur(5px);
}
- demo:
<div class="bg-red">123455</div>
<div class="mask"></div>
.bg-red {
width: 900px;
height: 900px;
background: #ff0000;
color: #0000ff;
}
.mask {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: rgba(25, 28, 34, 0.88);
z-index: 2;
// backdrop-filter: blur(10px);
// -webkit-backdrop-filter: blur(10px);
}