CSS backdrop-filter 属性
实例
让元素后面区域添加图形效果:
.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:20px40px;
}
尝试一下 »
浏览器支持
表格中的数字表示支持该属性的第一个浏览器版本号。
紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。
| 属性 | |||||
|---|---|---|---|---|---|
| backdrop-filter | 76 | 17 | 103 | 9.0 -webkit- | 63 |
标签定义及使用说明
backdrop-filter CSS 属性可以让你为一个元素后面区域添加图形效果（如模糊或颜色偏移）。
因为它适用于元素背后的所有元素，为了看到效果，必须使元素或其背景至少部分透明。
语法
backdrop-filter: <filter-function-list>
| 值 | 描述 |
|---|---|
| none | 没有应用于背景的滤镜。 |
| <filter-function-list> | 一个以空格分隔的滤镜函数（<filter-function>）或是要应用到背景上的 SVG 滤镜。 |
/* 关键词值 */
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(4px4px10pxblue);
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;
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(4px4px10pxblue);
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;