如何使滑块图像更暗？

Posted 2023-02-22

【中文标题】如何使滑块图像更暗？

【英文标题】：How to make slider images darker?

【发布时间】：2015-06-23 03:12:39

【问题描述】：

我的 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 样式。

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

【问题讨论】：

您可以尝试修改叠加层和滑块控件的 z-index。使控件的 z-index 高于叠加层，并且叠加层 z-index 高于滑块的其余部分。

@Robert 是的，我可以，但是 html 代码结构不允许我这样做，因为覆盖 div 总是在滑块之上。

Revolution 滑块带有自己的叠加选项，您可以启用它并为此重写背景 css。我通常会这样做，而且效果很好。尝试启用 2x2 黑色，并添加：.tp-dottedoverlay.twoxtwo background: linear-gradient(to bottom, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%) !important;

@Havihavi thanx man，我找到了）））

转到滑块设置 -> 外观 -> 虚线叠加

【参考方案1】：

首先你必须扩展.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);

【讨论】：

但是我如何将图层保持在顶部.. 文本和图像图层也受到不透明度级别的影响

太棒了！非常感谢。我永远不会自己发现。 :p

【参考方案2】：

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

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

这可以在侧边栏的滑块外观设置中找到。您需要更改“虚线叠加大小”选项：

选项 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 获取。

【讨论】：

@YPCrumble 感谢您的反馈，我已经更新了答案。我希望现在好些了吗？

【参考方案3】：

找到了一个超级简单的方法！

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

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

找不到？检查此链接。

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

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

希望这更容易，但事实并非如此。不喜欢它们在设置中包含的虚线覆盖。希望这可以帮助某人。

【讨论】：

在样式上，我必须将图层居中对齐（H 和 V）才能正常工作

【参考方案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);
    

【参考方案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);

第二个条目将为此特定幻灯片 (#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);