Css div中的无样式背景图像转换

Css div中的无样式背景图像转换,css,less,Css,Less,我有一个背景为png的div,我想用样式转换为0.4s。如果我使用的颜色有效,但是如果我在背景上使用的图像无效,为什么? 这是我的代码: .transition_bg{ transition-property: background; /*standard*/ transition-duration: 0.4s; -webkit-transition-property: background; /*Safari e Chrome */ -webkit-trans

我有一个背景为png的div,我想用样式转换为0.4s。如果我使用的颜色有效,但是如果我在背景上使用的图像无效,为什么? 这是我的代码:

.transition_bg{
    transition-property: background; /*standard*/
    transition-duration: 0.4s;

    -webkit-transition-property: background; /*Safari e Chrome */
    -webkit-transition-duration: 0.4s;

    -o-transition-property: background;      /*Opera*/
    -o-transition-duration: 0.4s;

    -moz-transition-property: background;    /*Firefox*/
    -moz-transition-duration: 0.4s; 
}

#navigation li
{
    margin: 0;
    width:126px;
    height:40px;
    padding-left:0px;
    padding-right:0px;
    list-style:none;
    float:left;
    background:url(../img/header/bg_nav.jpg) top left repeat-x;
    .transition_bg;
}

#navigation li:hover{
    background:url(../img/header/bg_nav_hover.jpg) top left repeat-x;
}

CSS转换不会淡入/淡出背景图像(除非有人能纠正我)

如果您确信需要这样做,也许您可以使用两个容器,每个容器中都有一个背景图像,但当您悬停时,其中一个容器的不透明度设置为1,另一个为0,而默认值则相反。这将满足您的需求,但您必须处理DOM中的另一个元素,这可能会导致问题


我打算提供一个示例,认为您希望将背景应用于通用容器,但由于您希望在列表项中执行此操作,您必须大幅增加代码。

请给我一个示例。。如果在其他模式下不可能实现,则这可能是一个解决方案。谢谢