Bild Maske über Nivo Slider

Ich bin mit Nivo slider, aber wollen, um ein PNG-Bild über den Schieberegler, so zeigt es nur durch die Teile, die transparent sind. Was wäre der beste Weg dies zu tun ist mithilfe von JavaScript oder CSS?

InformationsquelleAutor GavinR | 2011-04-26
  1. 6

    Ändern Sie die demo mit dem code unten, um zu sehen, wie dies getan werden kann. Es gibt eine Menge von Möglichkeiten, dies zu tun, so sollten Sie herausfinden, was funktioniert am besten für Ihre situation. Der folgende code schließt die Schieberegler und ein weiteres, relativ platzierte Bild innerhalb der gleichen div. Ein bisschen CSS wird verwendet, um die position, die das Bild und sehen Sie den Effekt in Aktion.

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

    Bild
    Bild Maske über Nivo Slider

    Screenshot von der Wirkung
    Bild Maske über Nivo Slider

    • Froh, dass es für Sie arbeitet. Da Sie angenommen haben, die zu beantworten sind, sind Sie warten auf andere Antworten, bevor die Vergabe der bounty?
    • Leider bewirkt diese Methode, dass die Navigations-Tasten, die überlagert werden, sowie alle hyperlinks innerhalb der Beschriftung, völlig unklickbaren.
    • Irigoyen: Natürlich, aber das ist, was der OP gefragt hat. Ich Stimme zu, dass es nicht etwas, was Sie wollen in der Regel tun, aber es ist nicht verdient, ein downvote. Wenn Sie versuchen, zu schützen, die künftigen Generationen von Nivo-Slider-Benutzer zu Schaden sich dann ein downvote der Frage selbst würde mehr Sinn machen.
    InformationsquelleAutor NakedBrunch
  2. 1

    Aussehen dieser Schieberegler (Beispiel).

    • Das ist keine Lösung.
    InformationsquelleAutor sarah
  3. 1

    Nur die PNG zu werden absolute positioniert und bewegen Sie es über die Oberseite der nivo slider. Stellen Sie sicher, dass der z-index wird über dem Schieberegler.

    • Ich habe versucht, absolut-Positionierung, sondern dass die Positionen der img-absolut auf der Seite - nicht das was ich will.
    • Sie können die absolute Positionierung relativ zu etwas anderem. Werfen Sie einen Blick auf diese und sehen, ob es hilft: w3schools.com/css/css_positioning.asp
    • Genauer gesagt, erstellen Sie eine übergeordnete div-Element für sowohl das Bild und den regler, und legen Sie Sie auf position:relative. Dann, wenn Sie absolute Positionierung png, es wird absolut positioniert werden in den div.
    InformationsquelleAutor Jimmy
  4. 1

    absolut positionierten divs gesetzt, wenn mit relativ positionierten div-als Sie geben Sie Ihre gewünschte Ergebnis.

    positionieren Sie Ihr nivo slider-container als relative positioniert ist, und legen Sie die Maske div innerhalb der nivo slider-container und position absolute.

    hoffe, es wird Ihnen helfen,

    InformationsquelleAutor Fahad
  5. 0

    Hatte ich die gleiche Aufgabe von meinem designer, was bedeutet, einige Maske über die Animationen.

    Dies war der einfache Teil!!!!!!
    Der komplizierte Teil war:

    • machen, die links funktionieren wieder
    • wieder zurück animation pause auf der Maus über Sie;
    • zu platzieren, controlNav Tasten über das Bild und machen Sie auch Arbeit...

    So, ich hatte zu entwickeln und nutzen diese (von mir ist, und erklärt im detail dort):

    Vielleicht hilft es anderen in der Zukunft 😉

    Razvan

    • Wie Stackoverflow ist nicht abhängig von externen links, die einbrechen könnte einige Zeit, ist es ratsam, zumindest die wichtigen Auszüge von externen Seiten in Ihre Antworten.
    • du hast Recht, nicht aber, dass Sie löschen die alten Diskussionen posten, und ich weiß nicht, ob ich irgendwo anders, dass der code so gut erklärt und dokumentiert 🙁 Der einzige Ort, ich habe es immer noch, es ist unter dem Projekt habe ich es brauchte, also, wenn es jemanden interessiert kann ich versuchen, schnappen Sie sich den code und veröffentlichen Sie es hier.
    InformationsquelleAutor qdev
Schreibe einen Kommentar