filter
CSS属性将模糊或颜色偏移等图形效果应用于元素。滤镜通常用于调整图像,背景和边框的渲染
/* 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: unset;
blur()模糊
blur()
函数将高斯模糊应用于输入图像。radius
定义了高斯函数的标准偏差值,或者屏幕上有多少像素相互融合,因此,较大的值将产生更多的模糊。若没有设置值,默认为0
。该参数可以指定为 CSS 长度,但不接受百分比值。
filter: blur(5px)
brightness()亮度
brightness()
函数将线性乘法器应用于输入图像,使其看起来或多或少地变得明亮。值为 0%
将创建全黑图像。值为 100%
会使输入保持不变。其他值是效果的线性乘数。如果值大于 100%
提供更明亮的结果。若没有设置值,默认为 1
。
filter: brightness(2)
contrast()对比度
contrast()
函数可调整输入图像的对比度。值是 0%
的话,图像会全黑。值是 100%
,图像不变。值可以超过 100%
,意味着会运用更低的对比。若没有设置值,默认是 1
。
filter: contrast(200%)
更多见MDN