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

时间:2013-09-26 21:48:44

标签: html css3 hover transition

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

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

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

2 个答案:

答案 0 :(得分:0)

请检查此demo

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

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

答案 1 :(得分:0)

最后一支笔是here

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

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