Question

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

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

使用的图片 enter image description here

效果截图 enter image description here

Answer 2

看this slider（example）。

Answer 3

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

Answer 4

绝对定位的div在与相对定位的div放置时比它们提供所需的结果。

将你的nivo滑块容器定位为相对位置，并将mask div放在nivo滑块容器中并定位该绝对值。

希望它会帮助你

Answer 5

我的设计师也有同样的任务，这意味着在动画上放置一些遮罩。

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

让链接再次运作
让鼠标悬停在它们上方的动画暂停;
将controlNav按钮放在图像上并使它们工作......

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

这可能会在将来帮助其他人;）

勒兹

Nivo滑块上的图像蒙版

5 个答案: