0

背景の png が繰り返される div があります。styles.less で 0.4 秒のトランジションを与えたいのですが、色を使用すると機能しますが、背景に画像を使用すると機能しないのはなぜですか? これは私のコードです:

.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;
}
4

1 に答える 1

0

CSS トランジションは、背景画像をフェードイン/フェードアウトしません (誰かが私を修正できない限り)。

これを行う必要があると確信している場合は、それぞれ背景画像を含む 2 つのコンテナーを使用することもできますが、ホバーすると、一方の不透明度が 1 に設定され、もう一方が 0 に設定されますが、デフォルトは反対になります。これで要件は満たされますが、DOM 内の別の要素を処理する必要があり、問題が発生する可能性があります。

背景を汎用コンテナーに適用したいと考えて例を提供するつもりでしたが、リスト項目内でこれを行うには、コードを大幅に増やす必要があります。

于 2012-07-09T16:25:36.753 に答える