0

Firefox のいくつかの弾丸でトランジションを機能させようとしていますが、うまくいきません。chrome、safari、opera、ie で動作します。これが私のcssです。背景画像を y 位置に調整したいだけです。

#slideshow-nav a {
    display: block;
    width: 10px;
    height: 10px;
    padding: 3px;
    background: url('images/bullets.png');
    background-position-y: 17px;
    -webkit-transition:all 0.2s ease-in-out;
    -moz-transition:all 0.2s ease-in-out;
    -o-transition:all 0.2s ease-in-out;
    -ms-transition:all 0.2s ease-in-out;
    transition:all 0.2s ease-in-out;
}

#slideshow-nav a:hover {
    display: block;
    width: 10px;
    height: 10px;
    padding: 3px;
    background: url('images/bullets.png');
    background-position-y: 0px;
    -webkit-transition:all 0.2s ease-in-out;
    -moz-transition:all 0.2s ease-in-out;
    -o-transition:all 0.2s ease-in-out;
    -ms-transition:all 0.2s ease-in-out;
    transition:all 0.2s ease-in-out;
}

#slideshow-nav li.activeSlide a { 
    display: block;
    background: url('images/bullets.png');
    background-position-y: 0px;
    width: 10px;
    height: 10px;
    -webkit-transition:all 0.2s ease-in-out;
    -moz-transition:all 0.2s ease-in-out;
    -o-transition:all 0.2s ease-in-out;
    -ms-transition:all 0.2s ease-in-out;
    transition:all 0.2s ease-in-out;
}
4

2 に答える 2

4

私の知る限り（これは間違いなく不完全です）background-position-y、有効なプロパティではありません。私の推測では、Firefox はそれを認識していません。試す：

background-position: 0 17px;

行く

background-position: 0 0;
于 2012-05-10T21:54:58.760 に答える
0 
a.menuhvr { background-image:url('images/bullets.png'); background-repeat:no-repeat; background-position:left; padding-right: 0px; padding-left: 20px; color: #FFFFFF; text-decoration: none; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-size: 14px; font-weight:lighter; text-transform: none; border: 0px; display: block; -webkit-transition: all .5s ease-in-out 0s; -o-transition: all .5s ease-in-out 0s; -moz-transition: all .5s ease-in-out 0s; transition: all .5s ease-in-out 0s; height: 25px; line-height: 25px; }

a.menuhvr:hover { background-image: url(images/bullet1.png); background-repeat:no-repeat; background-color: #104595; background-position: right; margin: 0px; padding-right: 0px; padding-left: 25px; color: #FFFFFF; text-decoration: none; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-size: 14px; font-weight:lighter; background-color: #104595; border: 0px; display: block; height: 25px; line-height: 25px; }

必要に応じて、異なる弾丸画像の両方を変更したり、単一の画像を使用したりできます

于 2013-06-08T12:36:23.583 に答える