Make parallaxed Element völlig undurchsichtig

Question

Ich habe die folgende HTML-Struktur:

<section class="mysection"> 
    <div class="parallax"> 
    <div> 
     <svg></svg> 
    </div> 
    </div> 
</section> 

<section class="back"> 
    <div class="triangle"> 
     <img src="img/red-triangle-bkgrd.png"> 
    </div>  
</section> 

Dies ist die CSS in LESS:

.parallax{ 
     width: 90%; 
     margin-left: auto; 
     margin-right: auto; 
    } 

    section.back { 
    .triangle { 
     position: relative; 
     img { 
      position: absolute; 
      right:0; 
      top: 0;  
     } 
    } 
    } 

Bevor Parallaxe auf dem parallax Verwendung back sitzt nur unmittelbar unter dem Boden Grenze von mysection.

Wenn ich parallax von 1.11111111 skalieren, verwendet die parallax 100% Breite des Ansichtsfensters. Allerdings sitzt back nicht mehr direkt unter dem parallax. Stattdessen überlappt es mit dem parallax Bereich. Hier ist ein Bild einer realen Situation:

Wie kann ich back im Überlappungsbereich unsichtbar? Anders ausgedrückt, wie kann ich Svg oder seine Container vollständig undurchsichtig machen, ohne das überlagerte Bild darunter zu zeigen?

Ich versuchte 'Opazität: 1' auf Svg und seine Container, aber es funktioniert nicht.

Um detaillierter zu sein, verwende ich ein Tool namens ScrollMagic für diese Arbeit, wenn dies relevant ist.

Answer 1

Sie können die Stapelreihenfolge mit z-index festlegen. Versuchen Sie, die Einstellung folgendermaßen vor:

.mysection { 
    position: relative; 
    z-index: 1; 
} 

dies, dass unabhängig von der sicherstellen sollte in Ihrem .mysection (wie die svg/Karte) geht über unabhängig intersects (vorausgesetzt, Sie nicht einen größeren Z-Index auf die anderen Elemente anwenden).