CSS3 ​​filter​​(滤镜) 属性 

filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();

​注意:​ 滤镜通常使用百分比 (如：75%), 当然也可以使用小数来表示 (如：0.75)



 ​​vue网站​​下面的赞助商模块做的很好玩，当鼠标悬停的时候，图片会“改变”。看过它的代码之后才发现并不是修改了图片路径，只是通过img:hover更改了图片的属性


hover小技巧 利用filter改变滤镜值实现效果_html

img {
    filter: grayscale(100%); 
    opacity: 0.66; 
    width: 260px; 
}

img:hover {
    filter: none; 
    opacity: 1; 
}


CSS的灰度滤镜上