重拾CSS，前端样式精读-函数（滤镜）

前言

本文收录于CSS系列文章中，欢迎阅读指正

当遇到公祭日，哀悼日等重要日子时我们会看到有些网站页面全局转换成了灰白色的主题，如何实现该效果？

使用css滤镜在body中加一行代码即可实现

body {
    filter: grayscale(100%);
}

除此之外，css滤镜还有什么其他用法？本文将详细介绍css中的滤镜相关函数

blur()

应用高斯模糊到标签上。值越高，图像越模糊。传入一个参数：blur(radius)表示模糊的半径，它定义了高斯函数的标准偏差值，即屏幕上有多少像素相互融合; 因此，较大的值会产生更多模糊。值为 0 会使输入保持不变。该值为空则为 0。

.blur {
    filter: blur(1px);
}

<div class="blur">应用模糊（blur）滤镜效果</div>

brightness()

调整元素的亮度。值为0%时全黑，值为100%时原样，值大于100%时更亮。brightness(amount)：输出的亮度值取决于“>或“>的大小。低于100%的值会使图片变暗，超过100%的值将会使其变亮。当值为0%时将会创建一个全黑的图像，当值为100%时不会有任何变化。该值为空时默认为1。

.brightness {
    filter: brightness(150%);
}

<div class="brightness">调节亮度（brightness）</div>

contrast()

增加或减少元素的对比度。值为0%时全灰，值为100%时原样。语法：contrast(amount)输出的对比度取决于“>或“>的大小。低于100%的值会降低对比度，高于100% 的值会增加对比度。值为0%将创建完全灰色的图像，值为100%时不会有任何变化。该值为空时默认为 1。

.contrast {
    filter: contrast(200%);
}

<div class="contrast">调整对比度（contrast）</div>

drop-shadow()

向元素添加阴影效果，类似于box-shadow，但为滤镜版本的阴影。语法是drop-shadow(offset-x offset-y blur-radius color) 。

用法和box-shadow类似，参数如下：

• offset-x指定水平距离，其中负值将阴影放置到元素的左侧。
• offset-y指定垂直距离，其中负值将阴影置于元素之上。如果x，y两个值都为 0，则阴影直接放置在元素后面。
• blur-radius是阴影的模糊半径，指定为“>。值越大，阴影就越大，也越模糊。如果未指定，则默认为 0，从而产生清晰、不模糊的边缘。不允许有负值
• color是阴影的颜色，指定为“>。如果未指定，则使用color属性值。

.drop-shadow {
    filter: drop-shadow(5px 5px 10px grey);
}

<div class="drop-shadow">带有阴影效果（drop-shadow）</div>

grayscale()

将图像转换成灰度。0% 表示原图，100% 则完全转为灰度图。grayscale(amount)，amount是转换值的大小，可以是“>或“>，当值为100%时，灰度最大。0%时与原图没有区别。0%到100%之间的值会使灰度线性变化。amount为空时使用值为1。

.grayscale {
    filter: grayscale(100%);
}

<div class="grayscale">应用灰度（grayscale）滤镜效果</div>

hue-rotate()

通过旋转色相环对图像应用色相旋转，值为角度。hue-rotate(angle)，angle是输入色相的相对变化，指定为“>。0deg表示保持不变。正色调旋转会增加色调值，而负旋转会减少色调值。初始值为0，没有最小值或最大值。

.hue-rotate {
    filter: hue-rotate(90deg);
}

<div class="hue-rotate">色相旋转（hue-rotate）后</div>

invert()

反转元素的颜色。0% 表示原图，100%将完全反转颜色。invert(amount)，amount表示转换值的大小，类型为“>或“>。当值为100%时颜色完全反转，0%保持不变，值在0%与100%之间效果为线性变化的。插值的初始值为0。

.invert {
    filter: invert(100%);
}

<div class="invert">颜色反转（invert）后</div>

opacity()

更改元素的不透明度。与opacity属性类似，此处是滤镜透明度。opacity(amount)中的amount是转化的数值，要求是一个“>或一个“>（百分比）。值为0%是完全透明的，值为 100%会保留原来的效果。值在0%与100%之间效果为线性变化的，参数的最小差值为1。

.opacity {
    filter: opacity(50%);
}

<div class="opacity">不透明度（opacity）调整后</div>

saturate()

调整元素的饱和度。值为0%时完全不饱和，值为100%时原样。saturate(amount)，amount指定为“>或“>。值低于100%会使图像不饱和，而值高于会使100%图像过饱和。值为0%表示完全不饱和，值等于100%时保持不变。插值的初始值为1。

.saturate {
    filter: saturate(300%);
}

<div class="saturate">饱和度（saturate）调整后</div>

sepia()

应用深褐色调，旧照片效果。0%表示原图，100%则完全转为深褐色。sepia(amount)，amount指定为“>或“>。当值为100%表示深褐色，当值为0%表示保持不变。值在0%与100%之间效果为线性变化，初始值为0。

.sepia {
    filter: sepia(100%);
}

<div class="sepia">应用深褐色调（sepia）滤镜效果</div>

总结

CSS滤镜函数可以对网页元素，包括图像、文字和背景，应用各种视觉效果，本文介绍的滤镜函数提供了丰富的设计选项，能够直接在CSS中实现传统需要图像编辑软件才能完成的效果，从而简化了设计流程。

以上就是文章全部内容，感谢你看到了最后，如果觉得本篇文章或者这个系列写的不错，还望三连支持一下，你的支持就是我创作的动力，谢谢！

相关代码

myCode: 基于js的一些小案例或者项目 - Gitee.com

参考

- CSS：层叠样式表 | MDN”> - CSS：层叠样式表 | MDN

filter - CSS：层叠样式表 | MDN