css实现图片变灰

今天设计图上有需求是给图片一个hover效果，让图片变灰，这里我们可以尝试用css的灰色滤镜
代码如下：

 //html结构
 <img :src="item.img" alt   @click="$router.push('/after')" />
 
//css中的样式
 img {
    
    
        width: 250px;
        height: 250px;
        border-radius: 125px;
        &:hover {
    
    
          -webkit-filter: grayscale(100%);
          -o-filter: grayscale(100%);
          -moz-filter: grayscale(100%);
          -ms-filter: grayscale(100%);
          filter: grayscale(100%);
          filter: gray;
        }
      }

根据这个小需求，让我想到了前段时间全国哀悼日，国内大型网站全部变灰，对图片的也可以这样处理，在总样式表里加一个“*”通配符即可

*{
    
    
   -webkit-filter: grayscale(100%);
   -o-filter: grayscale(100%);
   -moz-filter: grayscale(100%);
   -ms-filter: grayscale(100%);
    filter: grayscale(100%);
    filter: gray;
}