Question

希望有人可以帮我解决我的css问题，以便在我正在实施新设计的nivo滑块上进行背景定位。

.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/

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

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

现在背景定位正确。好奇但为什么它在他们的网站上的默认滑块工作而不是我的。对我来说很奇怪。

Answer 1

您的背景位置设置为.nivo-nextNav，但.nivo-nextNav没有背景，链接确实如此; .nivo-nextNav a中的'a'＆lt; -

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

 .nivo-directionNav a {
 .......
 background:url(../images/arrows.png) -43px 0 no-repeat;

Answer 2

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

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

Nivo背景位置被忽略

2 个答案: