svg
图片可以直接用 color
来进行换色,但是像 png
这样的图片却不可以通过 color
来换色,而在日常开发过程中通常会遇到设计那边要求图片在 hover
时换色,那么怎么利用 CSS 来完成这个效果呢。
css
// 这里使用的是less嵌套规则
&:hover {
img {
transform: translateY(-200px);
filter: drop-shadow(#ffd283 0 200px);
}
}
这里主要使用 filter
和transform
来完成这个效果,drop-shadow
第一个参数是hover
时的颜色,后两个参数分别是 X、Y 轴的偏移量。这里的原理就是让原本的 img
偏移处用户视图区域(偏移值可以更改),然后让新的图片偏移到原img
的位置。