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

CSS3 filter(滤镜) 属性 

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

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

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

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

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

CSS的灰度滤镜上