将带有背景图像的 div 更改为带有向左过渡的彩色背景答案

【问题标题】：change div with background image to color ackground with transition left将带有背景图像的 div 更改为带有向左过渡的彩色背景
【发布时间】：2013-09-26 21:48:43
【问题描述】：

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

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

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

【问题讨论】：

您是否仅限于使用 css3？ jquery 有可能吗？

标签： html css hover transition

【解决方案1】：

最后的笔是here。

我确实使用了 css 蒙版，特别有趣的是，使用 chrome 使用蒙版比使用 Firefox 更简单。该代码在firefox和chrome上都可以工作，我没有检查ie..

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

【讨论】：

【解决方案2】：

请检查此demo。

这是一个纯 css 解决方案。

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

【讨论】：

这有点像我想要的，只是我不希望红色影响 img 的透明部分......
也许你可以使用z-index: -1; 到.overlay 类。但问题是，如果您不想对透明部分生效，则必须在此代码中使它们不透明，而不是透明；）
让它不透明对我不起作用，因为在这个导航后面有一个图像幻灯片...如果我有一个在形状和透明度方面相同的图像并且我把它着色了red，会不会更容易得到我想要的效果？
这样可以吗？过渡将在 325px 和 75px 之间。改变这个：.container:hover .overlay { left:75px; }