Revolution滑块背景层CSS

Question

我试图在Revolution滑块中设置两种类型的幻灯片。将有幻灯片的主要背景图像，然后半透明层占据幻灯片的左侧或右侧的40％，并具有高于此的文本层。我有使用“后”伪选择器下面的CSS，可以实现对一侧上的半透明层（右或左，在以下的情况下，左侧）：

.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); 
}' 

这需要所述一个的护理而不是其他的，所以我需要一个幻灯片特定的类，它为父类.slotholder类添加了“左”或“右”属性。有什么建议么？

Answer 1

你可以尝试也使用：之前的右侧，请尽量使用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

在“链接&徐”一节中，有一个字段添加一个类的<li>幻灯片 - 您可以添加一个类（例如“右文字”，“左文字”）并应用适当的CSS规则，例如

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