html点击图片改变filter,CSS改变图片颜色之filter属性
一般提到对对图片的处理，都会想到PS。但，其实在前端，CSS也有一些属性起到相同的效果。在CSS中有着CSS滤镜之称的filter属性，他可以让图片模糊，锐化等。
filter属性支持一下关键字：
none()：没有任何效果，默认为none；
img{
width: 300px;
filter: none;
}
效果图：
blur()：高斯模糊，length值越大越模糊；
img{
width: 300px;
filter: blur(4px);
}
brightness()：线性乘法，可以让图片看起来更亮或者更暗；
img{
width: 300px;
filter: brightness(80%);
}
将filter: brightness(80%);改为filter: brightness(20%);时图片变暗了，说明百分百比越大越亮，越小越暗。
contrast()：对比度；
img{
width: 300px;
filter: contrast(50%);
}
drop-shadow()：给图像设置一个阴影效果；
img{
width: 300px;
filter: drop-shadow(300px 0 0 #0B85CC);
}
drop-shadow(h-shadow v-shadow blur spread color);
grayscale()：将图像转换为灰度图像；
img{
width: 300px;
filter: grayscale(80%);
}
hue-rotate()：色相旋转；
img{
width: 300px;
filter: hue-rotate(70deg);
}
invert()：反转；
img{
width: 300px;
filter: invert(100%);
}
有点曝光的感觉。
opacity()：透明化：
img{
width: 300px;
filter: opacity(10%);
}
saturate();
sepia()：将图像转换为深褐色；
url(); (还不会) 。
以上右边图片除了阴影属性其它都为原图来对比。
html点击图片改变filter,CSS改变图片颜色之filter属性
一般提到对对图片的处理，都会想到PS。但，其实在前端，CSS也有一些属性起到相同的效果。在CSS中有着CSS滤镜之称的filter属性，他可以让图片模糊，锐化等。
filter属性支持一下关键字：
none()：没有任何效果，默认为none；
img{
width: 300px;
filter: none;
}
效果图：
blur()：高斯模糊，length值越大越模糊；
img{
width: 300px;
filter: blur(4px);
}
brightness()：线性乘法，可以让图片看起来更亮或者更暗；
img{
width: 300px;
filter: brightness(80%);
}
将filter: brightness(80%);改为filter: brightness(20%);时图片变暗了，说明百分百比越大越亮，越小越暗。
contrast()：对比度；
img{
width: 300px;
filter: contrast(50%);
}
drop-shadow()：给图像设置一个阴影效果；
img{
width: 300px;
filter: drop-shadow(300px 0 0 #0B85CC);
}
drop-shadow(h-shadow v-shadow blur spread color);
grayscale()：将图像转换为灰度图像；
img{
width: 300px;
filter: grayscale(80%);
}
hue-rotate()：色相旋转；
img{
width: 300px;
filter: hue-rotate(70deg);
}
invert()：反转；
img{
width: 300px;
filter: invert(100%);
}
有点曝光的感觉。
opacity()：透明化：
img{
width: 300px;
filter: opacity(10%);
}
saturate();
sepia()：将图像转换为深褐色；
url(); (还不会) 。
以上右边图片除了阴影属性其它都为原图来对比。