如何使滑块图像变暗？

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

Slider Revolution FAQ提供3种解决方案:

• 选项1)启用其内置叠加层

  这可以在滑块外观设置,侧栏中找到.您需要更改"Dotted Overlay Size"选项:

  

• 选项2)将以下CSS块之一添加到幻灯片的"自定义CSS"中

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

  1. 如果您的个人幻灯片有字幕:

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

  2. 如果您的个人幻灯片没有字幕:

     .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提供的解决方案和说明可在此处获得.

Answer 2

首先,您必须扩展.rev_slider .slotholder(不是.tp-bgimg)的样式,因为开始动画会创建其他元素.

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

试试这个,它会运作良好.

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