css滤镜

前言

css 常用滤镜有不少例如：毛玻璃效果、灰色滤镜、阴影滤镜、自定义svg滤镜等，尤其比较常见的就是毛玻璃和滤镜效果了，毛玻璃一般用在背景(z方向底部)模糊，灰色滤镜一般用于清明节主题(伟人去世、灾难场景纪念等等)以及特殊节日主题

参考地址mdn

滤镜

我们只需要在根节点 css 输入 filter 会有提示，可以输入想要的滤镜，并继承到其他元素，整个页面都会拥有滤镜效果(例如：灰色主题)

常见的滤镜使用如下所示

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%);

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

/* 多个滤镜 */
filter: contrast(175%) brightness(3%);
filter: drop-shadow(3px 3px red) sepia(100%) drop-shadow(-3px -3px blue);

/* 不使用滤镜 */
filter: none;

/* 全局值 */
filter: inherit;
filter: initial;
filter: revert;
filter: revert-layer;
filter: unset;

下面展示几个滤镜效果

none无滤镜

filter: none;

blur毛玻璃(也叫高斯模糊)

filter: blur(5px);

contrast对比度

filter: contrast(200%);

grayscale灰度图

filter: grayscale(80%);

hue-rotate色相旋转

filter: hue-rotate(90deg);

invert反转图像(甚至一些手游都兴起一时)

filter: invert(100%);

saturate高饱和

filter: saturate(200%);

sepia深褐色

filter: sepia(100%);

drop-shadow阴影

这个是根据内容边界添加阴影，对比比较自定义盒子效果，可以通过该属性更好实现阴影

filter: drop-shadow(16px 16px 20px yellow) invert(75%);

看着效果不太好，来个火狐的

svg

filter: url("../../media/examples/shadow.svg#element-id");

没有合适的 svg 也来一个火狐的

最后

就介绍这么多吧，用到的时候，也许能帮助到大家