0

希望有人可以帮助我解决我在新设计中实现的 nivo 滑块上的背景定位的 css。

背景位置被忽略了.nivo-nextNav，我不知道为什么。

这是我的CSS：

/* Direction nav styles (e.g. Next & Prev) */
.nivo-directionNav a {
display:block;
width:43px;
height:45px;
background:url(../images/arrows.png) no-repeat;
text-indent:-9999px;
border:0;
}
.nivo-prevNav {
left:0px;
}
.nivo-nextNav {
background-position: -43px 0;
right: 22px;
}

页面链接：http ://www.plumeriawebdesign.com/Headstand%20Software/

我现在可以工作了。我将css更改为.nivo-directionNav a以下内容：

.nivo-directionNav a {
position:absolute;
top:40%;
z-index:9;
cursor:pointer;
width: 43px;
height: 45px;
text-indent:-9999px;
background-image:url(../images/arrows.png);
background-repeat: no-repeat;
}

现在背景已正确定位。很好奇为什么它可以在他们网站上的默认滑块上运行，而不是我的。对我来说很奇怪。

4

2 回答 2

0

您的背景位置设置为 .nivo-nextNav，但 .nivo-nextNav 没有背景，链接有；.nivo-nextNav 中的“a” <-

最简单的解决方案：将位置放在后台；

 .nivo-directionNav a {
 .......
 background:url(../images/arrows.png) -43px 0 no-repeat;
于 2012-02-14T19:25:00.513 回答
0

background-position 仅定位背景图像。但是您的 .nivo-nextNav 元素中没有背景图像。

从我看到的 NivoSlider 使用这样的箭头：

.nivo-directionNav a {
    display:block;
    width:30px;
    height:30px;
    background:url(arrow.png) no-repeat;
    text-indent:-9999px;
    border:0;
}
a.nivo-nextNav {
    background-position:-30px 0;
    right:15px;
}
a.nivo-prevNav {
    left:15px;
}

尝试在元素的开头使用锚标记。

于 2012-02-14T19:41:41.947 回答