Revolution Slider Hintergrund Layer CSS

Question

Ich versuche, zwei Arten von Folien in Revolution Schieberegler einzurichten. Es wird das Haupthintergrundbild für die Folie sein, dann eine halbdeckende Schicht, die 40% der linken Seite oder der rechten Seite der Folie einnimmt, mit einer darüber liegenden Textebene. Ich habe folgende CSS dass die halb opake Schicht für eine Seite (rechts oder links, in dem Fall, unten, links) mit dem ‚nach‘ psuedo Selektor erreichen kann:

.rev_slider .slotholder:after{ 
width: 40%; 
height: 100%; 
content: ""; 
position: absolute; 
top: 0; 
left: 0; 
pointer-events: none; 

/* black overlay with 50% transparency */ 
background: rgba(0, 0, 0, 0.5); 
}' 

Dies übernimmt eine Seite der Transparenz, aber nicht die andere, also brauche ich eine Folie-spezifische Klasse, die eine "links" oder "rechts" -Eigenschaft der Eltern .slotholder Klasse hinzufügt. Irgendwelche Vorschläge?

Answer 1

können Sie auch versuchen, verwenden: vor für die rechte Seite, versuchen Sie dieses css

.rev_slider .slotholder:after, .rev_slider .slotholder:before{ 
width: 40%; 
height: 100%; 
content: ""; 
position: absolute; 
top: 0; 

pointer-events: none; 

/* black overlay with 50% transparency */ 
background: rgba(0, 0, 0, 0.5); 
} 
.rev_slider .slotholder:before{ 
    right: 0; 
} 
.rev_slider .slotholder:after{ 
    left: 0; 
} 

Answer 2

Im „Link & Seo“ Abschnitt verwenden, gibt es ein Feld eine Klasse zum <li> von hinzufügen die Folie - Sie können eine Klasse hinzufügen (zB "right-text", "left-text") und die entsprechende css-Regel anwenden, z

left-text .slotholder:after{ 
    width: 40%; 
    height: 100%; 
    content: ""; 
    position: absolute; 
    top: 0; 
    left: 0; 
    pointer-events: none; 

    /* black overlay with 50% transparency */ 
    background: rgba(0, 0, 0, 0.5); 
}