javascript - 如何使 slider 图像变暗？

Question

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

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

<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 常见问题解答为此提供了 3 种解决方案:

• 选项 1) 启用他们的内置叠加层

  这可以在侧边栏的 slider 外观设置中找到。您需要更改“Dotted Overlay Size”选项:

  

• 选项 2) 将以下 CSS block 之一添加到幻灯片的“自定义 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 提供的解决方案和说明可用here .