Css——filter属性

filter 支持的属性

filter: blur(5px);
filter: brightness(0.4);
filter: contrast(200%);
filter: drop-shadow(16px 16px 20px blue);
filter: grayscale(50%);
filter: hue-rotate(90deg);
filter: invert(75%);
filter: opacity(25%);
filter: saturate(30%);
filter: sepia(60%);

blur ：主要是做高斯模糊的

brightness ：用来修改亮度的

值可以是百分比，也可以是数值（0.5 = 50%），默认值是 1，但不能是负数。当值越接近 0，画面越黑，当等于 0 时，整个画面几乎就成纯黑的了；值理论上可以趋于无限大，当大到一定值时，画面就几乎成纯白了

contrast：用来调整图像的对比度

对比度 = 图像中 最白的色值 / 最黑的色值，按照这个公式又可以理解为：

• 对比度越大，白色越强(亮)、黑色越弱(暗)，图像越白；
• 对比度越小，白色越弱(暗)、黑色越强(白)，图像越黑；

contrast() 的值可以写百分比，也可以写数值（0.5 = 50%），默认值是 1，该值可以无限大，那样画面就会更亮，但不能为负数

drop-shadow：能够给图像设置阴影效果

使用方式其实跟 box-shadow 一样，区别就是：drop-shadow 能够识别图像中的透明元素，给图像内容的每个边打上引用；box-shadow 只能给元素整个轮廓加阴影效果。

grayscale：网页置灰

hue-rotate：用于调整元素的色相，改变颜色

hue-rotate 的值的单位是角度（deg），每 360deg 一个变换周期

invert：用来翻转图像的

 

 

参考原网站：https://mp.weixin.qq.com/s/4nuvYcj86qLl-UMZIzHqUA