Nivo 滑块在顶部添加徽标

发布于 2024-12-13 16:24:31 字数 1742 浏览 5 评论 0原文

大家好，我已经按照我的规格设置了 Nivo 滑块，但我想要做的是将我的徽标覆盖在其顶部。我尝试过使用 z-index 但无济于事。

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<html lang="en">
<head>
    <title>Nivo Slider Demo</title>
    <link rel="stylesheet" href="../themes/default/default.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="../themes/pascal/pascal.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="../themes/orman/orman.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="../nivo-slider.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="style.css" type="text/css" media="screen" />
</head>
<body>

    <div id="header"><div class="slider-wrapper theme-default"><div id="slider" class="nivoSlider">
                <img src="images/dog.jpg" alt="" />
                <img src="images/cat.jpg" alt="" />
          </div></div></div><script type="text/javascript" src="scripts/jquery-1.6.1.min.js"></script>
    <script type="text/javascript" src="../jquery.nivo.slider.js"></script>
    <script type="text/javascript">
    $(window).load(function() {
        $('#slider').nivoSlider();
    });
    </script>
</body>
</html>

这是我添加的 css

#header{
width: 100%;
background-color: #000000;}

#content{
    width:900px;
    background:#0C6;
    color:#cccccc;
    margin-top:-120px;
    float:left;
    z-index:1000;
    margin:0 auto;
}

提前致谢亚当

原文

Hey guys I have setup Nivo slider to my specification, but what I want to be able to do is overlay my logo over the top of it. I have tried playing around with the z-index but to no avail.

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<html lang="en">
<head>
    <title>Nivo Slider Demo</title>
    <link rel="stylesheet" href="../themes/default/default.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="../themes/pascal/pascal.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="../themes/orman/orman.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="../nivo-slider.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="style.css" type="text/css" media="screen" />
</head>
<body>

    <div id="header"><div class="slider-wrapper theme-default"><div id="slider" class="nivoSlider">
                <img src="images/dog.jpg" alt="" />
                <img src="images/cat.jpg" alt="" />
          </div></div></div><script type="text/javascript" src="scripts/jquery-1.6.1.min.js"></script>
    <script type="text/javascript" src="../jquery.nivo.slider.js"></script>
    <script type="text/javascript">
    $(window).load(function() {
        $('#slider').nivoSlider();
    });
    </script>
</body>
</html>

This is the css I've added

#header{
width: 100%;
background-color: #000000;}

#content{
    width:900px;
    background:#0C6;
    color:#cccccc;
    margin-top:-120px;
    float:left;
    z-index:1000;
    margin:0 auto;
}

Thanks in advance
Adam

分享到QQ

分享到微博

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

发布评论

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

旧夏天 2024-12-20 16:24:31

将其加载到 js fiddler 上，它似乎可以工作：

http://jsfiddle.net/zdvPv/1/

正如@Reporter 所说，没有任何来源很难知道你在做什么。我刚刚玩了玩 firbug，然后我找到了一些东西放在 nivoslider 上。

<div style="position: absolute; top: 300; left:500; height: 100px; width: 100px; background: red; z-index: 100;">hello</div>

它被放置在滑块 div 的外部。该代码很糟糕，但它只是您查看它是否有效的开始，您可以用图像替换 div，或者可以将图像作为 div 的背景。

编辑：我在这个页面上弄乱了 firebug： http://nivo.dev7studios.com/ 无法向您展示图像思维

编辑2：我的解决方案是HTML & CSS 并不是真正的 javascript，所以不确定你想要如何实现它。您可以使用 jquery 动态注入“覆盖”

loaded it up on js fiddler and it seems to work:

http://jsfiddle.net/zdvPv/1/

As @Reporter said, its hard to know what your doing without any source. I just had a play with firbug and i was able to get something to sit over the nivoslider.

<div style="position: absolute; top: 300; left:500; height: 100px; width: 100px; background: red; z-index: 100;">hello</div>

this was placed outside of the slider div. The code is terrible but its just a start for you to see if it would work, you could replace the div with an image or maybe have the image as a background of the div.

Edit: i messed around with firebug on this page: http://nivo.dev7studios.com/ cant show you an image mind

Edit 2: My solution is HTML & CSS not really javascript, so not sure how you want this implemented. You could dynamically inject the "overlay" using jquery

回复收藏 0 原文

~没有更多了~