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 回答