Wie kann man Slider-Bilder dunkler machen?

Lesezeit: 5 Minuten

Ich habe Revolution Slider auf meinem WordPress installiert. Ziel ist es, ein dunkles Overlay mit aufzulegen opacity=0.3 über den Folien … Ich habe versucht, Overlay .div mit absoluter Position zu erstellen, aber es verdeckte alle Schieberegler einschließlich seiner Steuerelemente wie “nächste Folie”, “vorherige Folie” und andere.

Also muss ich diese Überlagerung nur zwischen dem Folienbild und den Schiebereglern platzieren. Ich habe Code mit Bild gefunden

<div class="tp-bgimg defaultimg" data-lazyload="undefined" data-bgfit="cover" data-bgposition="center top" data-bgrepeat="no-repeat" data-lazydone="undefined" src="http://wp-themes/wp-content/uploads/2015/04/slider1.png" data-src="http://wp-themes/wp-content/uploads/2015/04/slider1.png" style="width: 100%; height: 100%; visibility: inherit; opacity: 1; background-image: url(http://wp-themes/wp-content/uploads/2015/04/slider1.png); background-color: rgba(0, 0, 0, 0); background-size: cover; background-position: 50% 0%; background-repeat: no-repeat;"></div>

Dann habe ich das geschrieben

 $('.tp-bgimg').before('<div class="slider-area-overlay"></div>');

Nichts ändern. Ich weiß nicht warum.

Nächster Schritt: Machen wir es über CSS.

.tp-bgimg { position: relative; }

.tp-bgimg:before {
    background: rgba(0,0,0,.5);
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    content: "";
}

Sein cooles Dia-Bild erscheint ohne Änderungen, und dann, nach 1-2 Sekunden, erscheinen meine CSS-Stile.

Ich habe wirklich keine Ahnung, wie ich dieses Problem lösen soll, bitte helfen Sie mir.

  • Sie könnten versuchen, den Z-Index der Overlay- und Schieberegler-Steuerelemente zu ändern. Machen Sie den Z-Index der Steuerelemente höher als das Overlay und den Overlay-Z-Index höher als den Rest des Schiebereglers.

    – Robert

    16. April 2015 um 15:34 Uhr


  • @Robert ja, ich könnte, aber die HTML-Codestruktur lässt mich das nicht tun, weil div immer über den Schieberegler gelegt wird.

    – Benutzer3768359

    16. April 2015 um 15:40 Uhr


  • Der Revolution-Schieberegler verfügt über eine eigene Überlagerungsoption. Sie können sie aktivieren und das Hintergrund-CSS dafür neu schreiben. Das mache ich meistens und es funktioniert super. Versuchen Sie, 2×2 Schwarz zu aktivieren, und fügen Sie Folgendes hinzu: .tp-dottedoverlay.twoxtwo { background: linear-gradient(to bottom, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%) !important; }

    – Havihavi

    16. April 2015 um 15:44 Uhr


  • @Havihavi danke Mann, ich habe es gefunden)))

    – Benutzer3768359

    16. April 2015 um 15:55 Uhr


  • Gehen Sie zu Slider-Einstellungen -> Darstellung -> gepunktete Überlagerung

    – Havihavi

    16. April 2015 um 15:56 Uhr

Benutzeravatar von moollaza
moollaza

Die Slider Revolution FAQ bietet 3 Lösungen dafür:

  • Option 1) Aktivieren Sie das integrierte Overlay

    Dies kann in den Slider-Darstellungseinstellungen in der Seitenleiste gefunden werden. Sie sollten die Option “Größe der gepunkteten Überlagerung” ändern:

    Aktivieren Sie die gepunktete Überlagerungsoption in den Schiebereglereinstellungen

  • Option 2) Fügen Sie einen der folgenden CSS-Blöcke zum „Benutzerdefinierten CSS“ für Ihre Folie hinzu

    Ich habe es persönlich zum Global Slider CSS hinzugefügt, sodass es alle meine Folien beeinflusst hat.

    1. Wenn Ihre einzelnen Folien Beschriftungen haben:

      .rev_slider .slotholder:after {
          width: 100%;
          height: 100%;
          content: "";
          position: absolute;
          left: 0;
          top: 0;
          pointer-events: none;
      
          /* black overlay with 50% transparency */
          background: rgba(0, 0, 0, 0.5);
      }
      
    2. Wenn Ihre individuellen Folien unterlassen Sie Untertitel haben:

      .rev_slider:after {
          width: 100%;
          height: 100%;
          content: "";
          position: absolute;
          left: 0;
          top: 0;
          z-index: 99;
          pointer-events: none;
      
          /* black overlay with 50% transparency */
          background: rgba(0, 0, 0, 0.5);
      }
      
  • Option 3) Verwenden Sie eine Bildbearbeitungssoftware, z. B. Adobe Photoshop, um manuell eine dunkle Überlagerung auf Ihre Bilder anzuwenden, und verwenden Sie dann die abgedunkelten Bilder als Folienhintergrund.

    Der einfachste Ansatz besteht darin, eine Ebene über Ihrem Bild hinzuzufügen, es schwarz zu malen und dann die Transparenz der schwarzen Ebene auf etwa 50 % zu reduzieren.

    Anwenden einer dunklen Überlagerung auf ein Bild in Photoshop


Die von Slider Revolution bereitgestellten Lösungen und Anweisungen sind verfügbar hier.

  • @YPCrumble danke für das Feedback, ich habe die Antwort aktualisiert. Ich hoffe es ist jetzt besser?

    – moollaza

    13. Januar 2016 um 17:33 Uhr

Benutzeravatar von Alexander Goncharov
Alexander Gontscharow

Zuerst müssen Sie den Stil erweitern .rev_slider .slotholder (nicht von .tp-bgimg), da die Startanimation zusätzliche Elemente erzeugt.

Zweitens erstellt der Schieberegler ein Duplikat Ihres Bildes für die Animation, das einen höheren Z-Index als den Z-Index des Quellbildes hat.

Versuchen Sie dies, es wird gut funktionieren.

.rev_slider .slotholder:after, .rev_slider .slotholder .kenburnimg img:after {
    width: 100%;
    height: 100%;
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    pointer-events: none;
    z-index: 99;
    background: rgba(0,0,0,.5);
}

  • Aber wie halte ich die Ebenen oben? Die Text- und Bildebenen werden auch von der Deckkraft beeinflusst

    – amitmula

    19. Dezember 2015 um 18:18 Uhr

  • Genial! Danke vielmals. Alleine hätte ich das nie herausgefunden. :p

    – Woppi

    10. Mai 2017 um 4:39 Uhr

Habe einen super einfachen Weg gefunden, der funktioniert!

Erstellen Sie eine neue Form. Benennen Sie die Ebenenüberlagerung und ziehen Sie sie nach oben. Male es schwarz an. Ändern Sie die Deckkraft auf 50 %. Breite und Höhe sollten 100 % betragen. Wählen Sie „Strecken“ im Cover-Modus. Fast fertig. Noch ein Schritt.

Gehen Sie schließlich zu Verhalten und schalten Sie Align auf „Slide Based“ um. Dadurch wird die Überlagerung wirklich auf 100 % gedehnt.

Kannst du es nicht finden? Überprüfen Sie diesen Link.

https://www.themepunch.com/faq/incorrect-position-or-size-for-text-button-or-shape/

Scrollen Sie zu Schritt 3. Responsive Alignment anpassen.

Wünschte, das wäre einfacher, aber es ist nicht. Ich mag die gepunktete Überlagerung nicht, die sie in den Einstellungen enthalten. Hoffe, das hilft jemandem.

  • Bei Style musste ich die Ebene zentriert ausrichten (H und V), damit es funktioniert

    – Cyberponk

    10. Dezember 2019 um 21:41 Uhr

Nur für Video Z-Index hinzufügen und CSS-Klasse ändern:

.rs-background-video-layer:before {
        width: 100%;
        height: 100%;
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        pointer-events: none;
        z-index:1;
        background: rgba(0, 0, 0, 0.3);
    }

Ich habe ein Update für die Slider Revolution Version 6 gefunden, da dies in neueren Versionen nicht mehr funktioniert:

.rev_slider .slotholder:after,
#rev_slider_2_1 rs-sbg:after
{
    content: '';
    position: absolute;
    z-index: 3;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    background: rgba(30,30,30,0.5);
}

Der zweite Eintrag erledigt dies für diese spezielle Diashow (#rev_slider_2_1).

Um einen einheitlicheren Ansatz für alle Folien zu haben, der der vorherigen Lösung entspricht, könnten Sie so etwas verwenden:

.rev_slider .slotholder:after,
rs-sbg-wrap rs-sbg:after
{
    content: '';
    position: absolute;
    z-index: 3;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    background: rgba(30,30,30,0.5);
}

1391620cookie-checkWie kann man Slider-Bilder dunkler machen?

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy