css - 革命 slider 背景层 CSS

Question

我正在尝试在 Revolution slider 中设置两种类型的幻灯片。将有幻灯片的主要背景图像，然后是占幻灯片左侧或右侧 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 类添加“左”或“右”属性。有什么建议吗？

Answer 1

你也可以尝试在右侧使用 :before，请尝试使用这个 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;
 }