[英]Revolution Slider Background Layer CSS
I'm trying to set up two types of slides in Revolution slider. 我正在尝试在Revolution滑块中设置两种类型的幻灯片。 There will be the main background image for the slide, then a semi-opaque layer taking up 40% of the left side or the right side of the slide, with a text layer above that.
将有幻灯片的主要背景图像,然后是一个半透明层,占据了幻灯片左侧或右侧40%的位置,其上方是文本层。 I have the following css that can achieve the semi-opaque layer for one side (right or left, in the case below, left side) using the 'after' psuedo selector:
我有以下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);
}'
This takes care of the one side of the transparency but not the other, so I need a slide-specific class which adds a "left" or "right" property to the parent .slotholder class. 这会照顾到透明性的一面,而不是另一面,因此我需要一个特定于幻灯片的类,该类为父.slotholder类添加了“ left”或“ right”属性。 Any suggestions?
有什么建议么?
you can try to use also :before for the right side, please try use this css 您也可以尝试使用:在右侧之前,请尝试使用此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;
}
In the "Link & Seo" section, there is a field to add a class to the <li>
of the slide - You can add a class (eg "right-text", "left-text") and apply the appropriate css rule, eg 在“链接与搜索引擎优化”部分中,有一个字段可以向幻灯片的
<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);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.