Nivo 背景位置被忽略

发布于 2025-01-05 11:25:03 字数 943 浏览 6 评论 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/

我现在可以使用它了。我将 .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;
}

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

原文

Would like it someone could help me troubleshoot my css for the background positioning on a nivo slider I'm implementing on a new design.

The background-position is being ignored for .nivo-nextNav and I can't figure out why.

Here is my 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;
}

Link to the page: http://www.plumeriawebdesign.com/Headstand%20Software/

I have it working now. I changed the css for .nivo-directionNav a to the following:

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

Now the background is positioned properly. Curious though why it works on their default slider on their site and not mine. Strange to me.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

为你拒绝所有暧昧 2025-01-12 11:25:03

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

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

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

Your background position is set to the .nivo-nextNav, but .nivo-nextNav doesn't have a background, the link does; the 'a' in .nivo-nextNav a <-

easiest solution: Put the position in the background;

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

回复收藏 0 原文

翻了热茶 2025-01-12 11:25:03

背景位置仅定位背景图像。但是 .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;
}

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

background-position only positions the background-image. But there is no background-image in your .nivo-nextNav element.

From what I see NivoSlider uses the arrows like this:

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

Try using the anchor tag in the beggining of your elements.

回复收藏 0 原文

~没有更多了~