Nivo Slider 上的图像蒙版答案

【问题标题】：Image mask over Nivo SliderNivo Slider 上的图像蒙版
【发布时间】：2011-04-26 19:46:29
【问题描述】：

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

【问题讨论】：

标签： javascript css slider image-rotation nivo-slider

【解决方案1】：

使用下面的代码更改演示，看看如何做到这一点。有很多方法可以做到这一点，因此您应该找出最适合您的情况的方法。下面的代码将滑块和另一个相对放置的图像包装在同一个 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;
}

使用的图片

效果截图

【讨论】：

@GavinR：很高兴它对你有用。既然你已经接受了答案，你是不是在等待其他答案再奖励赏金？
不幸的是，这种方法会导致覆盖的导航按钮以及标题中的任何超链接完全无法点击。
@Michael Irigoyen：显然，但这正是 OP 所要求的。我同意这不是您通常想要做的事情，但不值得投反对票。如果您想保护 Nivo Slider 的后代用户免受伤害，那么对问题本身投反对票会更有意义。

【解决方案2】：

看this slider (example)。

【讨论】：

【解决方案3】：

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

【讨论】：

我已经尝试过绝对定位，但这会将 img 绝对定位在页面上 - 这不是我想要的。
您可以相对于其他东西进行绝对定位。看看这个，看看它是否有帮助：w3schools.com/css/css_positioning.asp
更具体地说，为图像和滑块创建一个父 div，并将其设置为 position:relative。那么当你对 png 进行绝对定位时，它将绝对定位在 div 中。

【解决方案4】：

绝对定位的 div 放置在相对定位的 div 中时，它们会提供您所需的结果。

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

希望对你有帮助

【讨论】：

【解决方案5】：

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

这是最简单的部分！复杂的部分是：

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

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

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

拉兹万

【讨论】：

由于 Stackoverflow 不依赖于可能会在一段时间内中断的外部链接，因此建议至少在您的答案中包含外部网站的重要摘录。
@Nippey - 你是对的，虽然他们不会删除旧的讨论帖子，我不知道我是否还有其他地方可以很好地解释和记录代码:(唯一我仍然拥有它的地方，它在我需要它的项目下，所以如果有人感兴趣，我可以尝试获取代码并在此处重新发布。