Javascript 如何使滑块图像变暗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29679363/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make slider images darker?
提问by user3768359
I have revolution slider installed on my WordPress. The aim is to put a dark overlay with opacity=0.3over the slides... I`ve tried to make overlay .div with absolute position, but it covered all slider including its control elements like "next slide", "previous slide" and others.
我的 WordPress 上安装了革命滑块。目的是opacity=0.3在幻灯片上放置一个深色叠加层...我尝试使用绝对位置叠加 .div，但它覆盖了所有滑块，包括其控制元素，如“下一张幻灯片”、“上一张幻灯片”等。
So, i need to put this overlay just between slide image and slider controls. I`ve found code with image
所以，我需要把这个叠加层放在幻灯片图像和滑块控件之间。我找到了带有图像的代码
<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>
Then i wrote this
然后我写了这个
$('.tp-bgimg').before('<div class="slider-area-overlay"></div>');
Nothing change. I dont know why.
没变化。我不知道为什么。
Next step: lets do it via css.
下一步：让我们通过 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: "";
}
Its cool, but slide image appears with no changes, and then, after 1-2 sreconds appear my css styles.
它很酷，但幻灯片图像没有任何变化，然后，在 1-2 秒后出现我的 css 样式。
I really have no idea how to decide this problem, please help me.
我真的不知道如何决定这个问题，请帮助我。
回答by moollaza
The Slider Revolution FAQ offers 3 solutions to this:
滑块革命常见问题解答为此提供了 3 种解决方案：
Option 1) Enable their built-in overlay
This can be found in the slider appearance settings, sidebar. You'll want to change the "Dotted Overlay Size" option:
Option 2) Add one of the following CSS blocks to the "Custom CSS" for your slide
I personally added it to the Global Slider CSS, so it affected all my slides.
If your individual slides have captions:
.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); }If your individual slides do nothave captions:
.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); }
Option 3) Use image editing software, e.g. Adobe Photoshop, to manually apply a dark overlay to your images, then use the darkened images as the slide background.
The simplest approach is to add a layer above your image, paint it black, and then reduce the transparency of the black layer to around 50%.
选项 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% 左右。
The solutions and instructions provided by Slider Revolution are available here.
Slider Revolution 提供的解决方案和说明可在此处获得。
回答by Alexander Goncharov
First you must to extend style of .rev_slider .slotholder(not of .tp-bgimg), because the start animation creates additional elements.
首先，您必须扩展.rev_slider .slotholder( 不是.tp-bgimg) 的样式，因为开始动画会创建额外的元素。
Second, the slider creates a duplicate of your image for animation, that has z-index more than source image z-index.
其次，滑块创建动画图像的副本，其 z-index 大于源图像 z-index。
Try this, it will work well.
试试这个，它会工作得很好。
.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);
}回答by kevllar
Found a super easy way that works!
找到了一个超级简单的方法！
Create a new shape. Name the layer overlay and drag it to the top. Colour it black. Change opacity to 50%. Width and height should be 100%. Choose "Stretch" in Cover Mode. Almost done. One more step.
创建一个新形状。命名图层叠加并将其拖到顶部。把它涂成黑色。将不透明度更改为 50%。宽度和高度应为 100%。在封面模式中选择“拉伸”。快完成了。再一步。
Finally, go to Behavior and switch Align to "Slide Based". This will truly stretch the overlay to 100%.
最后，转到行为并将对齐切换为“基于幻灯片”。这将真正将覆盖拉伸到 100%。
Can't find it? Check this link.
找不到？检查此链接。
https://www.themepunch.com/faq/incorrect-position-or-size-for-text-button-or-shape/
https://www.themepunch.com/faq/incorrect-position-or-size-for-text-button-or-shape/
Scroll to step 3. Adjust the Responsive Alignment.
滚动到第 3 步。调整响应对齐。
Wish this was easier but it's not. Don't like the dotted overlay they include in the settings. Hope this helps someone.
希望这更容易，但事实并非如此。不喜欢它们包含在设置中的虚线覆盖。希望这可以帮助某人。
回答by Abidemi Kusimo
Just incase for video add z-index and change css class:
以防万一视频添加 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);
}
回答by Dirk Loose
I found an update for the Slider Revolution Version 6, since this won't work anymore in newer versions:
我找到了 Slider Revolution Version 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);
}
The secound entry will do it for this specific slideshow (#rev_slider_2_1).
第二个条目将针对此特定幻灯片 (#rev_slider_2_1) 执行此操作。
To have a more common approach for all slides which is equivalent to the previous solution, you could use something like this:
要为所有幻灯片采用与先前解决方案等效的更通用方法，您可以使用以下内容：
.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);
}
