Question

我的WordPress上安装了旋转滑块。目的是在幻灯片上放置一个带有opacity=0.3的黑色叠加层...我试图用绝对位置制作叠加.div，但它覆盖了所有滑块，包括其控制元素，如“下一张幻灯片”，“上一张幻灯片“等等。

所以，我需要在幻灯片图像和滑块控件之间放置这个叠加层。我找到了带图像的代码

<div class="tp-bgimg defaultimg" data-lazyload="undefined" data-bgfit="cover" data-bgposition="center top" data-bgrepeat="no-repeat" data-lazydone="undefined" src="http://wp-themes/wp-content/uploads/2015/04/slider1.png" data-src="http://wp-themes/wp-content/uploads/2015/04/slider1.png" style="width: 100%; height: 100%; visibility: inherit; opacity: 1; background-image: url(http://wp-themes/wp-content/uploads/2015/04/slider1.png); background-color: rgba(0, 0, 0, 0); background-size: cover; background-position: 50% 0%; background-repeat: no-repeat;"></div>

然后我写了这个

 $('.tp-bgimg').before('<div class="slider-area-overlay"></div>');

没有任何改变。我不知道为什么。

下一步：让我们通过css。

.tp-bgimg { position: relative; }

.tp-bgimg:before {
    background: rgba(0,0,0,.5);
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    content: "";
}

很酷，但幻灯片图片显示没有任何变化，然后，1-2秒后出现我的CSS样式。

我真的不知道如何决定这个问题，请帮助我。

Answer 1

滑块革命常见问题解答为此提供了3种解决方案：

选项1）启用内置叠加层

这可以在滑块外观设置，侧栏中找到。您需要更改“Dotted Overlay Size”选项：

选项2）将以下CSS块之一添加到幻灯片的“自定义CSS”

我个人将其添加到Global Slider CSS中，因此它影响了我的所有幻灯片。

如果您的个人幻灯片有字幕：

.rev_slider .slotholder:after {
    width: 100%;
    height: 100%;
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    pointer-events: none;

    /* black overlay with 50% transparency */
    background: rgba(0, 0, 0, 0.5);
}

如果您的个人幻灯片没有字幕：

.rev_slider:after {
    width: 100%;
    height: 100%;
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    z-index: 99;
    pointer-events: none;

    /* black overlay with 50% transparency */
    background: rgba(0, 0, 0, 0.5);
}

选项3）使用图像编辑软件，例如Adobe Photoshop，为图像手动应用深色叠加，然后使用暗色图像作为幻灯片背景。

最简单的方法是在图像上方添加一个图层，将其涂成黑色，然后将黑色图层的透明度降低到50％左右。

Slider Revolution提供的解决方案和说明可用here。

Answer 2

首先，您必须扩展.rev_slider .slotholder（而不是.tp-bgimg）的样式，因为开始动画会创建其他元素。

其次，滑块创建动画图像的副本，其z-index比源图像z-index多。

试试这个，它会运作良好。

＆＃13;

.rev_slider .slotholder:after, .rev_slider .slotholder .kenburnimg img:after {
    width: 100%;
    height: 100%;
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    pointer-events: none;
    z-index: 99;
    background: rgba(0,0,0,.5);
}

＆＃13;

Answer 3

找到一种有效的超级方式！

创建一个新形状。将图层叠加命名并将其拖到顶部。颜色为黑色。将不透明度更改为50％。宽度和高度应为100％。在封面模式中选择“拉伸”。几乎完成了。还有一步。

最后，转到“行为”并将“对齐”切换为“基于幻灯片”。这将真正将覆盖层拉伸至100％。

找不到了吗？点击此链接。

https://www.themepunch.com/faq/incorrect-position-or-size-for-text-button-or-shape/

滚动到第3步。调整响应对齐。

希望这更容易，但事实并非如此。不喜欢它们在设置中包含的虚线叠加。希望这有助于某人。

Answer 4

以防万一，在视频中添加z-index并更改CSS类：

.rs-background-video-layer:before {
        width: 100%;
        height: 100%;
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        pointer-events: none;
        z-index:1;
        background: rgba(0, 0, 0, 0.3);
    }

Answer 5

我找到了Slider Revolution版本6的更新，因为它在新版本中不再起作用：

.rev_slider .slotholder:after,
#rev_slider_2_1 rs-sbg:after
{
    content: '';
    position: absolute;
    z-index: 3;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    background: rgba(30,30,30,0.5);
}

secound条目将为此特定的幻灯片演示（＃rev_slider_2_1）。

要对所有幻灯片使用更通用的方法，使其与以前的解决方案等效，可以使用以下方法：

.rev_slider .slotholder:after,
rs-sbg-wrap rs-sbg:after
{
    content: '';
    position: absolute;
    z-index: 3;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    background: rgba(30,30,30,0.5);
}

如何使滑块图像变暗？

5 个答案: