CSS3 filter(滤镜) 属性: 为元素添加独特视觉效果

2023-12-26 16:06:45

好的，以下是您需要的关于 CSS3 filter(滤镜) 属性 的文章。

CSS3 filter(滤镜) 属性简介

CSS3 filter(滤镜) 属性允许您为元素添加各种各样的视觉效果。这些效果包括模糊、亮度、对比度、饱和度、色调旋转、灰度、反转和正片叠底等。您可以通过使用 filter 属性来创建各种各样的图像效果，如黑白照片、复古照片、艺术效果等。

CSS3 filter(滤镜) 属性语法

CSS3 filter(滤镜) 属性的语法如下：

filter: <filter-function> [<filter-function>] ...;

其中，是一个滤镜函数，它可以是以下值之一：

blur()：模糊效果
brightness()：亮度效果
contrast()：对比度效果
saturate()：饱和度效果
hue-rotate()：色调旋转效果
grayscale()：灰度效果
invert()：反转效果
sepia()：正片叠底效果

CSS3 filter(滤镜) 属性实例

以下是一些 CSS3 filter(滤镜) 属性的实例：

/* 将图像模糊 */
filter: blur(5px);

/* 将图像变亮 */
filter: brightness(1.5);

/* 增加图像的对比度 */
filter: contrast(1.5);

/* 降低图像的饱和度 */
filter: saturate(0.5);

/* 将图像旋转 180 度 */
filter: hue-rotate(180deg);

/* 将图像转换为灰度 */
filter: grayscale(1);

/* 将图像反转 */
filter: invert(1);

/* 将图像正片叠底 */
filter: sepia(1);