css - div 中的 styles.less 背景图像过渡

Question

我有一个重复背景 png 的 div，我想用 styles.less 提供 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;
}

Answer 1

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

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

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