Маска изображения над Nivo Slider - PullRequest
Новая
       64

Маска изображения над Nivo Slider

1 голос
/ 26 апреля 2011

Я использую Слайдер Nivo , но хочу поместить изображение PNG поверх слайдера, чтобы оно показывалось только через прозрачные части. Каков наилучший способ сделать это с помощью JavaScript или CSS?

Ответы [ 5 ]

6 голосов
/ 05 мая 2011

Измените демо, используя код ниже, чтобы увидеть, как это можно сделать.Есть много способов сделать это, поэтому вы должны выяснить, что лучше всего подходит для вашей ситуации.Код ниже оборачивает ползунок и другое относительно размещенное изображение внутри того же самого 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

1 голос
/ 04 мая 2011

Просто установите PNG в абсолютное положение и переместите его поверх слайдера nivo. Убедитесь, что z-index установлен выше ползунка.

1 голос
/ 04 мая 2011

div с абсолютным позиционированием, если они расположены в относительном позиционировании div, чем они дают требуемый результат.

поместите контейнер слайдера nivo как относительное положение и поместите маску div в контейнер слайдера nivo и поместите этот абсолют.

надеюсь, это поможет вам

1 голос
/ 27 апреля 2011
0 голосов
/ 16 июля 2012

У меня была та же задача от моего дизайнера, которая подразумевала наложение маски на анимацию.

Это было легко! Сложной частью было:

  • заставить ссылки работать снова
  • чтобы сделать паузу анимации при наведении мыши на них;
  • для размещения кнопок controlNav над изображением, а также для их работы ...

Итак, мне пришлось разработать и использовать это (сделано мной и подробно объяснено там):

Может быть, это поможет другим в будущем;)

Разван

...