使用背景图像将div更改为带有过渡的颜色背景

Question

所以我有这个img，我用它作为导航栏li的背景，我希望它：悬停img将有红色叠加颜色 - 我希望它有一个转换颜色变化来自右边在左边

这是我正在使用的img nav li img 所以PLZ注意到img是一个png，里面有一些transperen空间..

我尝试过搜索答案，但我只能找到淡入淡出过渡......

Answer 1

请检查此demo。

这是一个纯粹的CSS解决方案。

（我为png添加了蓝色背景以显示透明空间）

Answer 2

最后一支笔是here。

我确实使用过css mask，特别有趣的是，使用chrome比使用firefox更简单。代码将在firefox和chrome上运行，我没有检查ie ..

Here有一个很棒的css面具教程。