CSS 中的 filter属性

CSS 中的 filter属性

CSS 中的 filter 属性用于对元素的视觉效果进行处理和调整。它可以通过提供不同的滤镜函数来改变元素的外观和表现。filter 属性基于像素的处理方式，它会对元素的每个像素进行处理，从而改变元素的呈现效果。

常用的 filter 属性和对应的滤镜函数

blur()：对元素应用高斯模糊效果，可以指定模糊的半径。值越大，模糊程度越高。

brightness()：调整元素的亮度。取值范围为 0 到 1，1 表示原始亮度，小于 1 表示降低亮度，大于 1 表示增加亮度。

contrast()：调整元素的对比度。取值范围为 0 到 1，1 表示原始对比度，小于 1 表示降低对比度，大于 1 表示增加对比度。

grayscale()：将元素转为灰度图像。取值范围为 0 到 1，1 表示完全灰度，0 表示无变化。

invert()：将元素的颜色进行反转。取值范围为 0 到 1，1 表示完全反转，0 表示无变化。

opacity()：调整元素的不透明度。取值范围为 0 到 1，0 表示完全透明，1 表示完全不透明。

saturate()：调整元素的饱和度。取值范围为 0 到 1，1 表示原始饱和度，小于 1 表示降低饱和度，大于 1 表示增加饱和度。

sepia()：将元素转为深褐色调。取值范围为 0 到 1，1 表示完全深褐色，0 表示无变化。

使用 filter 属性时，可以将多个滤镜函数串联起来，实现多重效果的叠加。例如：

.filter-element {
  filter: blur(2px) brightness(0.8) grayscale(0.5);
}

上述代码会对具有 .filter-element 类名的元素应用一个模糊效果（半径为 2 像素）、降低亮度（亮度为 0.8）和灰度（灰度为 0.5）。

需要注意的是，filter 属性可能会影响元素的性能，特别是在大规模使用滤镜效果时。

具体请看MDN对应的文档

示例

/* 获取指向 SVG 滤镜的 URI，该SVG filter可以嵌入到外部 XML 文件中。 */
filter: url("filters.svg#filter-id");

/* blur() 函数将高斯模糊应用于输入图像。 */
filter: blur(5px);

/* brightness() 函数将线性乘法器应用于输入图像，使其看起来或多或少地变得明亮。 */
filter: brightness(0.4);

/* contrast() 函数可调整输入图像的对比度。值是 0% 的话，图像会全黑。值是 100%，图像不变。 */
filter: contrast(200%);

/* drop-shadow() 函数对输入图像应用阴影效果。阴影可以设置模糊度的，以特定颜色画出的遮罩图的偏移版本，最终合成在图像下面。 */
filter: drop-shadow(16px 16px 20px blue);

/* grayscale() 函数将改变输入图像灰度。 */
filter: grayscale(50%);

/* hue-rotate() 函数在输入图像上应用色相旋转。 */
filter: hue-rotate(90deg);

/* invert() 函数反转输入图像。 */
filter: invert(75%);

/* 透明度 */
filter: opacity(25%);

/* saturate() 函数转换图像饱和度。 */
filter: saturate(30%);

/* sepia() 函数将图像转换为深褐色。 */
filter: sepia(60%);

将网站变灰

html {
    -webkit-filter: grayscale(0.95); //非IE
    filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=0.95); //IE浏览器
}