如何通过CSS3动画淡化背景图像

Question

我正在制作一个菜单，每个项目都有像item1，item2等文本，悬停背景颜色变化，文本变为透明，背景图像会替换。我使用这段代码来简化风格。但它只适用于背景颜色而不适用于图像。

#nav li:hover {
    color:transparent !important;
    text-shadow: none;
    background-color: rgba(255, 0, 0, .5);

    -webkit-transition: all 1s ease-in;
    -moz-transition: all 1s ease-in;
    -o-transition: all 1s ease-in;
    -ms-transition: all 1s ease-in;
    transition: all 1s ease-in;
}

这是在线版本： http://jsfiddle.net/q4uHz/

Answer 1

背景图片无法动画;没有算法。一个简单的解决方案是在{+ 1}}中添加带有<img>的HTML图标并为其设置动画。像。的东西。

opacity: 0

http://jsfiddle.net/ExplosionPIlls/q4uHz/1/