胖蔡叨叨叨
你听我说

几个常见的滤镜CSS函数

CSS滤镜函数对于图像的增强效果往往有意想不到的效果,如设置图像灰度、亮度、透明度、饱和度、对比度等。本篇文章主要是介绍几个常见的CSS滤镜函数。

1、brightness

brightness()函数是应用于设置图像的滤镜,设置图像的亮度,参数使用百分比,0:表示全黑,100%:表示原图。格式如下:

filter:brightness(30%);

2、drop-shadow

drop-shadwo函数,可以给图像设置投影。参数和阴影设置参数shadow基本一致。格式如下:

/* Black shadow with 10px blur */
drop-shadow(16px 16px 10px black)

/* Reddish shadow with 1rem blur and .3rem spread */
/* WARNING: not generally supported by browsers */
drop-shadow(.5rem .5rem 1rem .3rem #e23)

3、grayscale

grayscale()函数,用于对图像应用设置图像的灰度。灰度值根据数量和百分比设置,值0为原始图像,0% 100% 之间的值会使灰度线性变化。amount 为空时使用值为1。一般的我们可以在重大节日或者重大事件的时候通过给body设置灰度实现全站变灰的功能。格式如下:

grayscale(0)     /* 无效果 */
grayscale(.7)    /* 70% 灰度 */
grayscale(100%)  /* 灰度最大 */

4、hue-rotate

hue-rotate()函数,用于设置图像的色相旋转。该函数接受单参数角度,该角度保持hue-rotation的角度。正色相角会增加色相值,而负角会降低色相值。输入样品的色调的相对变化,指定为一个角度。值为0DEG的值使输入不变。正色调旋转增加了色合值,而负旋转会降低色合值。插值的初始值为0。没有最小值或最大值。 Hue-Rotate(NDEG)评估N Modulo 360。其设置的格式如下:

hue-rotate( angle )

// 示例格式
hue-rotate(-90deg)  /* Same as 270deg rotation */
hue-rotate(0deg)    /* No effect */
hue-rotate(90deg)   /* 90deg rotation */
hue-rotate(.5turn)  /* 180deg rotation */
hue-rotate(405deg)  /* Same as 45deg rotation */

5、invert

invert(amount)函数设置滤镜,可以实现反转输入图像中的颜色样本,格式如下:

invert(0)     /* No effect */
invert(.6)    /* 60% inversion */
invert(100%)  /* Completely inverted */

amount指定为数字或百分比。 100% 的值完全反转,而 0% 的值保持输入不变。 0% 100% 之间的值是效果的线性乘数。插值的初始值为 0

6、opacity

opacity()函数,用于设置图像的不透明度。其格式如下:

opacity(amount)

// 示例代码
opacity(0%)   /* Completely transparent */
opacity(50%)  /* 50% transparent */
opacity(1)    /* No effect */

当传入的值为0% 是完全透明的,而 100% 的值使输入保持不变。 0%100% 之间的值是效果的线性乘数。插值的初始值为 1。

7、saturate

saturate()函数,用于设置头像的色彩饱和度。格式如下:

saturate(amount)


//示例格式
saturate(0)     /* Completely unsaturated */
saturate(.4)    /* 40% saturated */
saturate(100%)  /* No effect */
saturate(200%)  /* Double saturation */

低于 100% 的值会使图像去饱和,而高于 100% 的值会使图像过饱和。 0% 的值是完全不饱和的,而 100% 的值使输入保持不变。插值的初始值为 1

8、sepia

sepia()函数,将输入图像转换为棕褐色,使其呈现更温暖、更黄/棕色的外观。格式如下:

sepia(amount)

// 示例代码
sepia(0)     /* No effect */
sepia(.65)   /* 65% sepia */
sepia(100%)  /* Completely sepia */

传入的值指定为数字或百分比。 100%的值完全是棕褐色,而值为0%的值使输入不变。在0%100%之间的值是线性乘数在效果上。插值的初始值为0

9、contrast

contrast()函数,调整输入图像的对比度。格式如下:

contrast(amount)

// 示例代码
contrast(0)     /* Completely gray */
contrast(65%)   /* 65% contrast */
contrast(1)     /* No effect */
contrast(200%)  /* Double contrast */

传入的值指定为数字或百分比。低于 100% 的值会降低对比度,而高于 100% 的值会增加对比度。 0% 的值将创建一个完全灰色的图像,而 100% 的值将保持输入不变。插值的初始值为 1

附录

1、参考代码:常见CSS滤镜函数示例源码

2、更多CSS函数:CSS函数你知道多少?

赞(1) 打赏
转载请附上原文出处链接:胖蔡叨叨叨 » 几个常见的滤镜CSS函数
分享到: 更多 (0)

评论 1

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #0

    Very good article. I absolutely love this site. Thanks!

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏