backdrop-filter实现毛玻璃效果

2020-07-27237次阅读csscss模块

CSS 属性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%);//图像的对比度。值是0%的话,图像会全黑。值是100%,图像不变
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;

例如backdrop-filter实现毛玻璃效果:

.container {
  background: rgba(0,0,0,0.8);
  backdrop-filter: saturate(180%) blur(10px);
}

您也可以通过@supports来进一步适配:

.container {
  background: rgba(0,0,0,0.8);
}

@supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {
  .container {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }
}

 

上一篇: Flexbox弹性布局中的文本省略号实现  下一篇: webpack处理html中img图片引入问题  

backdrop-filter实现毛玻璃效果相关文章