1

transition:background 1s; を追加してみました。しかし、メニューの背景画像がなぜか遷移しません。私はそこで何が間違っていますか？

#menu{
    padding-top:18px;
    transition:background 1s;
    -moz-transition:background 1s;
}
#menu > li{
    float:left;
    padding-right:5px
}
#menu .last{
    padding-right:0;
}
#menu > li > a{
    width:188px;
    display:block;
    font-size:17px;
    color:#000;
    background:#fff;
    text-transform:uppercase;
    font-weight:400;
    background: url('../images/IMAGE_A.jpg');;
    height:70px;
    line-height:64px;
    border-top:1px solid #555;
    text-align:center;
    border-radius:4px 4px 0 0;
    -moz-border-radius:4px 4px 0 0;
    -webkit-border-radius:4px 4px 0 0;
}
#menu > li > a:hover,#menu > .active > a{
    background:#fff;
    background: url('../images/IMAGE_B.jpg');;
    background-repeat:no-repeat;
    border-color:#7DB112;
}
#menu > li > a span{
    display:block;
    position:relative;
    color:#000;
    font-family:Arial, Helvetica, sans-serif;
    font-size:17px
}
4

2 に答える 2

2

バックグラウンドはトランジションではまだサポートされていません。画像遷移は CSS4 で予定されています。現在、background-color、background-size、background-position などのすべての控えめなサブ プロパティのみを移行できます。

于 2012-07-28T22:45:27.073 に答える
0

(image_a と image_b を組み合わせて) スプライト イメージを作成し、image-position で再生します。何かのようなもの：

#menu{
    padding-top:18px;
}
#menu > li{
    float:left;
    padding-right:5px
}
#menu .last{
    padding-right:0;
}
#menu > li > a{
    transition:background-position 1s;
    -moz-transition:background-position 1s;
    width:188px;
    display:block;
    font-size:17px;
    color:#000;
    text-transform:uppercase;
    font-weight:400;
    background: url('../images/Sprite.jpg');;
    background-position: -200px 0px;
    height:70px;
    line-height:64px;
    border-top:1px solid #555;
    text-align:center;
    border-radius:4px 4px 0 0;
    -moz-border-radius:4px 4px 0 0;
    -webkit-border-radius:4px 4px 0 0;
}
#menu > li > a:hover,#menu > .active > a{
    background:#fff;
    background-position: -600px 0px;
    background-repeat:no-repeat;
    border-color:#7DB112;
}
#menu > li > a span{
    display:block;
    position:relative;
    color:#000;
    font-family:Arial, Helvetica, sans-serif;
    font-size:17px
}

また、背景画像と同じセレクターに遷移プロパティが設定されていることを確認してください。

それが役に立てば幸い。

于 2012-07-28T23:00:57.600 に答える