欢迎大家来到IT世界,在知识的湖畔探索吧!
CSS滤镜函数对于图像的增强效果往往有意想不到的效果,如设置图像灰度、亮度、透明度、饱和度、对比度等。本篇文章主要是介绍几个常见的CSS滤镜函数。本文首发自个人博客“胖蔡叨叨叨”,搜索查看更多有关CSS函数的用法。
1、brightness
brightness()函数是应用于设置图像的滤镜,设置图像的亮度,参数使用百分比,0:表示全黑,100%:表示原图。格式如下:
filter:brightness(30%);
欢迎大家来到IT世界,在知识的湖畔探索吧!
2、drop-shadow
drop-shadwo函数,可以给图像设置投影。参数和阴影设置参数shadow基本一致。格式如下:
欢迎大家来到IT世界,在知识的湖畔探索吧!/* 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。其设置的格式如下:
欢迎大家来到IT世界,在知识的湖畔探索吧!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。
免责声明:本站所有文章内容,图片,视频等均是来源于用户投稿和互联网及文摘转载整编而成,不代表本站观点,不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益,请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权,请联系删除,如若转载,请注明出处:https://itzsg.com/82427.html