龙空技术网

web前端开发学习:CSS3滤镜属性详解

web前端开发学习 95

前言:

今天小伙伴们对“黑白滤镜css”大致比较重视,咱们都想要剖析一些“黑白滤镜css”的相关知识。那么小编也在网络上搜集了一些有关“黑白滤镜css””的相关知识,希望兄弟们能喜欢,各位老铁们一起来学习一下吧!

亮度

属性名称

filter:brightness(倍数);当倍数值大于1的时候元素会变亮,小于1的时候元素会变暗 该属性的作用为调整元素当前的亮度,一般来说可以适用于鼠标悬浮到某元素时的提醒作用

对比度

模糊

属性名称filter:

blur(模糊半径);给图像设置高斯模糊。模糊半径的值设定高斯函数的标准差,或者是屏幕上以多少像素融在一起, 所以值越大越模糊;

色调

属性名称:灰色色阶

filter:grayscale();该属性的作用较为简单,就是将一个颜色复杂的区域改造成一个只有黑白二色的区域。圆括号里面的值定义转换的比例。值为100%则完全转为灰度图像,值为0%图像无变化。值在0%到100%之间,则是效果的线性乘子。若未设置,值默认是0;

饱和度

属性名称

filter:saturate(%);转换图像饱和度。圆括号里面的值定义转换的比例。值为0%则是完全不饱和,值为100%则图像无变化。其他值,则是效果的线性乘子。超过100%的值是允许的,则有更高的饱和度。 若值未设置,值默认是1。随着饱和度的增加,颜色就会更“清楚”。饱和度越小,颜色就会越“淡”;

该图片随着饱和度的增加,颜色变得越来越鲜艳

以上为滤镜属性中使用较多的属性值,此外还有一些使用较少的属性值,比如:drop-shadow、hue-rotate、invert等,如果各位小伙伴有兴趣的话,可以对这些属性深入的研究一下

对于学习web前端的学习路线,学习方法,系统学习规划有任何问题,可以关注我的头条号,私信给我”web前端“会自动回复web前端系统学习教程下载地址和学习路线以及详细的规划,我做web前端开发十年的时间,希望帮助新手少走弯路。

标签: #黑白滤镜css #css滤镜下载