了解fliter,为图片实现滤镜

205 阅读1分钟

看了百度、B站等网站,发现网站变灰,全部使用的是一段css代码

记录

Internet Explorer 不支持 filter 属性。

来自百度

然后从菜鸟编程中学到几个filter属性值

属性值解释
blur(px)高斯模糊
brightness(%)图片高亮
contrast(%) 调整图像的对比度。值是0%的话,图像会全黑。值是100%,图像不变。值可以超过100%,意味着会运用更低的对比。若没有设置值,默认是1
grayscale(%)将图像转换为灰度图像。
opacity(%)透明度
saturate(%) 转换图像饱和度。值定义转换的比例。值为0%则是完全不饱和,值为100%则图像无变化。其他值,则是效果的线性乘子。超过100%的值是允许的,则有更高的饱和度。 若值未设置,值默认是1。
hue-rotate(20deg)给图像应用色相旋转
invert(100%)反向输出函数
sepia(10%)转深褐色