css3filter过滤属性使用
时间：2023-04-02 20:44:10
HTML
最近在修改内网入口的时候，正好遇到需要使用过滤器的地方；一开始我用了两张图；鼠标滑过背景变成渐变色；图标切换；但是背景图标配置好后，鼠标滑过图标无法正常切换；于是想到了filter的效果来处理。于是顺便了解了一下常用的滤镜效果。使用滤镜：前言css3的filter滤镜属性可以对网页中的图片进行类似Photoshop图片处理的效果，通过css对图片进行处理。浏览器支持：只有IE浏览器不支持过滤（filter）属性，为了兼容低版本的safari和google浏览器，需要添加前缀-webkit-。公共属性的语法：filter:none|模糊（）|亮度（）|对比（）|阴影（）|灰度（）|色调旋转（）|反转（）|不透明度（）|饱和（）|棕褐色()|网址（）；可以同时为同一个元素定义多个CSS滤镜，比如filter:contrast(150%)brightness(1.5)，但是不同的滤镜效果是不一样的；默认值For:initialinherit表示从父级继承。注意：过滤器通常使用百分比（如：75%），当然也可以用小数表示（如：0.75）。normal未添加滤镜normal
grayscaleGrayscale将图像转换为灰度图像。该值定义转换的比例。值为100%将完全转换为灰度图像，值为0%则不会改变图像。如果未设置，该值默认为0。您也可以在0-1之间写入小数。
grayscale
//取值为0-1之间的小数，grayscale(0)原始图像；grayscale(1)变成完全灰色；[data-filter=image-grayscale]img{filter:grayscale(50%);-webkit-filter:灰度(50%);/*Chrome,Safari,Opera*/}saturate当饱和度值为0时，显示黑白。当值为0.5时，饱和度为原图的一半。当该值为1时，表示饱和度与原始图像相同。当该值大于1时，饱和度加强。//(取值为0-1之间的小数)
saturate
饱和度对是颜色强度（纯度）的定义。饱和度画面中色彩的鲜艳度和层次；[data-filter=image-saturate]img{滤镜：饱和(360%);-webkit-filter:饱和(360%);/*Chrome,Safari,Opera*/}sepiaSepia0表示棕色度为0%，显示原图，1表示棕色度为100%，显示棕色。
棕褐色
[data-filter=image-sepia]img{过滤器：棕褐色（100%);-webkit-过滤器：棕褐色（100%）；/*Chrome,Safari,Opera*/}invert反转输入图像。该值定义转换的比例。值为100%表示完全反转。值为0%时图像保持不变。0%到100%之间的值是效果的线性乘数。如果不设置该值，则该值默认为0。