革命滑块背景层 CSS答案

【问题标题】：Revolution Slider Background Layer CSS革命滑块背景层 CSS
【发布时间】：2017-09-11 21:49:59
【问题描述】：

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

.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 类。有什么建议吗？

【问题讨论】：

标签： css revolution-slider

【解决方案1】：

你也可以尝试使用:before for the right side, please try use this 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;
 }

【讨论】：

Artur，感谢您的回复，但是，我试图弄清楚如何在父 div 上设置一个类，以允许更改透明度出现在哪一侧。

【解决方案2】：

在“Link & Seo”部分，有一个字段可以向幻灯片的<li> 添加一个类 - 您可以添加一个类（例如“right-text”、“left-text”）并应用适当的 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);
}

【讨论】：