html - 将带有背景图像的 div 更改为带有左过渡的颜色背景

Question

所以我有这个 img 用作导航栏 li 的背景，我希望它在：悬停时 img 将具有红色叠加颜色 - 我希望它具有颜色变化从右到左的过渡

这是我正在使用nav li img 的 img，所以请注意 img 是一个 png，其中有一些 transperen 空格..

我试过寻找答案，但我只能找到淡入淡出的过渡......

Answer 1

请检查此演示。

这是一个纯 CSS 解决方案。

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

Answer 2

最后一支笔在这里。

我确实使用了 css 蒙版，特别有趣的是，使用 chrome 使用蒙版比使用 Firefox 非常简单。该代码将在 Firefox 和 chrome 上运行，我没有检查 ie..

这里有一个很棒的 CSS 蒙版教程。