Question

我正在尝试在Revolution滑块中设置两种类型的幻灯片。将有幻灯片的主要背景图像，然后是半透明的图层占据幻灯片左侧或右侧的40％，文本层位于其上方。我有以下css，可以使用'after'pseuedo选择器在一侧（右侧或左侧，在下面的情况下，左侧）实现半透明层：

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

这会处理透明度的一面而不是另一面，因此我需要一个特定于幻灯片的类，它将“left”或“right”属性添加到父.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

在“Link＆amp; Seo”部分中，有一个字段可以向幻灯片的<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);
}

革命滑块背景图层CSS

2 个答案: