1

我正在使用Nivo 滑块，但想在滑块上放置一个 PNG 图像，以便它只显示透明的部分。使用 JavaScript 或 CSS 执行此操作的最佳方法是什么？

4

5 回答 5

7

使用下面的代码更改演示，看看如何做到这一点。有很多方法可以做到这一点，因此您应该找出最适合您的情况的方法。下面的代码将滑块和另一个相对放置的图像包装在同一个 div 内。使用一点 CSS 来定位图像，您可以看到效果。

HTML

<div id="outer-wrapper">

            <div id="slider" class="nivoSlider">
                <img src="images/toystory.jpg" alt="" />
                <a href="http://dev7studios.com"><img src="images/up.jpg" alt="" title="This is an example of a caption" /></a>
                <img src="images/walle.jpg" alt="" />
                <img src="images/nemo.jpg" alt="" title="#htmlcaption" />
            </div>
            <div id="slider-mask"></div>
</div>

CSS

#outer-wrapper {
    width:618px;
    height:246px;
    margin-left:190px;
}

#slider-mask {
    position:relative;
    background:url(images/mask.png) no-repeat;
    width:618px;
    height:246px;
    top:-246px;
    left:0;
    z-index:100;
}

使用的图像 在此处输入图像描述

效果截图 在此处输入图像描述

于 2011-05-05T01:50:14.470 回答
1

只需将 PNG 设置为绝对定位并将其移动到 nivo 滑块的顶部。确保 z-index 设置在滑块上方。

于 2011-05-03T21:30:35.740 回答
1

当放置在相对定位的 div 中时，绝对定位的 div 比它们给您所需的结果。

将您的 nivo 滑块容器定位为相对定位，并将遮罩 div 放在 nivo 滑块容器中并定位该绝对值。

希望对你有帮助

于 2011-05-03T22:42:23.990 回答
1

看看这个滑块（例子）。

于 2011-04-27T07:19:28.087 回答
0

我的设计师有同样的任务，意思是在动画上放置一些遮罩。

这是最容易的部分！复杂的部分是：

  • 使链接再次起作用
  • 让鼠标悬停在它们上时后退动画；
  • 将 controlNav 按钮放在图像上并使其工作...

所以，我必须开发和使用它（由我完成，并在那里详细解释）：

也许这会在未来对其他人有所帮助；）

拉兹万

于 2012-07-16T19:11:17.757 回答