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: 20px 40px;
}

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。

属性	chrome	Edge	Firefox	Safari	Opera
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(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;

CSS backdrop-filter

CSS backdrop-filter 属性

浏览器支持

标签定义及使用说明

语法

相关阅读

目录[+]