1.蒙版遮盖法(灰色滤镜)
这里主要适用于使图标原颜色为灰色，hover之后变成其他颜色
其实这里的蒙版可以理解为一个图标灰色度的调节，是给整个图标(包括其背景及图片本身)表面加上一层灰色的透明滤镜(为什么透明，因为你能看到该板下的图片)，相应变色的方法为:
-
先下载并将图片添加至你想要的位置(如果你是图标，这里建议你去iconfont里面找一找你想要的图标，但注意，无论是图标图片请保持其原来的颜色，即hover之后你想要它呈现的颜色)
-
然后在css中给图片设置相应的属性(filter: grayscale(100%);)，这里的意思就是给图片加上一层灰色的蒙版了，设置后你可以停下来看看你的图标是否已经为灰色，如果失败请参考下面的另两个方法，具体过程请看代码
.aaa img{ width: 100px; height: 100px; filter: grayscale(100%); opacity: 1; } .aaa img:hover{ filter: grayscale(0); opacity: 1; }
-
最后如上图所示，给图片设置上hover，属性为(filter: grayscale(0);)，意为将原来的那层灰色蒙版清0，呈现其原来的颜色
方法总结:其实这个方法最突出的优点就是简单广泛，无脑嘎嘎搞，但缺点也很明显，一是变色范围有限，要求hover前的图标只能呈现为灰色，二是蒙版并不是所有浏览器都支持，如要了解请看下面分享的链接，三是蒙版易受其他元素和属性的影响，查了一下，还受什么相对定位等等的影响，所以如果布局简单清晰的话建议用蒙版，减少代码量，但如果图标较多，逻辑复杂的大网页建议用下面两种方法
2.iconfont组件工具矢量图变色法
该方法主要是利用(我这里为阿里巴巴旗下的一个字体图标站台)iconfont等等矢量图进行变色，什么是字体图标请自行搜索，我这里演示一下变色的操作方法
- 选中你想要的图标统一加到购物车里
- 全部添加至购物车之后点击添加到项目(没有就创建一个项目)
- 再将项目里面的矢量图全部下载至本地
- 下载后会得到一个压缩包，将其压缩包进行解压之后找到font文件夹(或者解压后看着有用的文件夹)，将其添加至你的html项目文件夹下面(千万注意，你的文件夹务必为图标的源文件，因为要使用其中的图标还需用link标签引入该源文件)
- 在head里面引入字体图标库，并挑选相应的图标和标签，利用class选择器进行图标调整
- 此时该图标实质上为字体，并拥有字体的相关性质
- 接下来对相应的标签或者class选择器进行css属性调整即可，将其前后颜色改成你想要的，其中再加个hover就完成了
值得注意的是，在该源文件里其实还有阿里提供的另外两种字体图标运用方法，诸君可以自行摸索尝试
方法总结:该方法较为万能，无颜色及其他元素属性影响的限制，但需引入iconfont的源文件，并注意应用图标时其相对位置，总得来说，有一定上手门槛，但不高
3.利用纯css的background-image属性，这里我就不做过多解释了，较为简单，诸君可参考以下两个链接
4.还有两种叫什么图片悬停和图片阴影的方法，小编也不是很理解，所以在这里不敢做过多解释，怕造成误导，诸君可自行参考理解，链接如下:
小编不知为何，按照文章敲得却连续两个试验都失败，欢迎大家为小编提供解决方法
以上就是现阶段小编所能摸索出的所有图片hover变色方法
如果你觉得文章对你有帮助，能否请诸君点上个赞，关注，收藏，来激励小编更有动力的创作
注意注意:欢迎大家在小编这里交流各种技术问题，大家一起来打破国内学术资本化的风气，为最纯粹的知识留下片净土(当然也欢迎大家来交流各种感情或者生活上的问题哈，小编有一定深度的心理学背景哦)
转载请告知 writer:king_24
