526互联

css属性中的 filter 和 backdrop-filter 使用

发布时间 2023-06-26 16:57:44作者: 蓓蕾心晴

filter

CSS属性 filter 将模糊或颜色偏移等图形效果应用于元素。滤镜通常用于调整图像、背景和边框的渲染。

mdn 文档：https://developer.mozilla.org/zh-CN/docs/Web/CSS/filter

/* URL to SVG filter */
filter: url("filters.svg#filter-id");

/* <filter-function> values */
filter: blur(5px);  // 高斯模糊
filter: brightness(0.4); // 图片明亮度，支持小数和百分比
filter: contrast(200%); // 对比度，支持小数和百分比
filter: drop-shadow(16px 16px 20px blue); // 阴影
filter: grayscale(50%); // 灰度，支持小数和百分比
filter: hue-rotate(90deg); // 色相
filter: invert(75%); // 反转，支持小数和百分比
filter: opacity(25%);  // 透明度，支持小数和百分比
filter: saturate(30%); // 饱和度，支持小数和百分比
filter: sepia(60%); // 深褐色

/* Multiple filters  同时写多个滤镜 */
filter: contrast(175%) brightness(3%);

/* Use no filter，不加滤镜 */
filter: none;

/* Global values */
filter: inherit;
filter: initial;
filter: revert;
filter: unset;

 

应用

  • 在增加一个黑色透明蒙层遮罩的时候，可以直接使用  filter: brightness(0.4） 来实现
  • 背景图实现高斯模糊，使用 filter:blur(10px)
  • 透明度整体调整，使用 filter:opacity()
  • 网站整站置灰，使用  filter: grayscale(100%)

backdrop-filter

mdn文档：https://developer.mozilla.org/zh-CN/docs/Web/CSS/backdrop-filter

backdrop-filter CSS 属性可以让你为一个元素后面区域添加图形效果（如模糊或颜色偏移）。因为它适用于元素背后的所有元素，为了看到效果，必须使元素或其背景至少部分透明。

/* 关键词值 */
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;

backdrop-filter 属性值基本上跟 filter 都是完全一样的，含义也是一样的.

注意

  • backdrop-filter 的兼容性较差，对于低版本的安卓，例如安卓 9 以下，可能都是无法生效的，如果能用 filter 的场景，尽量用 filter
  • 使用以上两个属性都会带来一定的性能问题，或多或少的影响浏览器渲染速度，如果使用 filter 或 backdrop-filter 的地方较多，则影响会更加明显，为了提高渲染性能，可以给设置 filter 的元素加               transform: translateZ(0); 从而启用 CPU 加速。参考