Image mask over Nivo Slider

问题

I'm using Nivo slider, but want to place a PNG image over the slider so it only shows through the parts that are transparent. What would be the best way to do this using JavaScript or CSS?

回答1:

Change the demo using the code below to see how this can be done. There are a lot of ways to do this so you should figure out what works best for your situation. The code below wraps the slider and another relatively placed image inside of the same div. A bit of CSS is used to position the the image and you can see the effect in action.

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

Image Used

Screenshot of the effect

回答2:

look this slider (example).

回答3:

Just set the PNG to be absolute positioned and move it over top of the nivo slider. Make sure that the z-index is set to be above the slider.

回答4:

absolute positioned divs when placed with in relative positioned div than they give your required result.

position your nivo slider container as relative positioned and put the mask div within the nivo slider container and position that absolute.

hope it will help you

回答5:

I had the same task from my designer, meaning to place some mask over the animations.

This was the easy part !!! The complicated part was to:

make links work again
to have back animation pause on mouse over them;
to place the controlNav buttons over the image and also make them work...

So, I had to develop and use this (done by me, and explained in detail over there):

http://support.dev7studios.com/discussions/nivo-slider/1371-moving-controlnav-outside-slider-on-a-separate-container-wrapper
http://support.dev7studios.com/discussions/nivo-slider/1375-trick-adding-custom-layer-for-anchors-on-images-completely-outside-the-slider

Maybe this will help others in the future ;)

Razvan

来源：https://stackoverflow.com/questions/5795621/image-mask-over-nivo-slider

标签

javascript

css

slider

image-rotation

nivo-slider