Nivo背景位置正在被忽略

希望有人能帮我解决我的css背景定位在我正在实施的一个新设计的nivo滑块上。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; 
}

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

来源

2012-02-14 plumwd

您的背景位置设置为.nivo-nextNav，但.nivo-nextNav没有背景，链接确实存在; '.nivo-nextNav a'< -

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

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

来源

2012-02-14 19:25:00 driedoezoe

它确实有背景。它是从'.nivo-directionNav a'继承的。设置这个类的位置不会解决问题，因为它需要为'.nivo-prevNav'和'.nivo-nextNav'进行更改。 – plumwd 2012-02-14 19:31:43

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

尝试使用锚标记在你的元素beggining。

来源

2012-02-14 19:41:41 Giannis

Nivo背景位置正在被忽略

回答

相关问题