Nivo滑块上的图像蒙版

Question

我正在使用Nivo滑块,但想要在滑块上放置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;
}

使用的图像

效果的屏幕截图