如何使 Cycle 2 覆盖文本不透明？

Question

我正在使用具有叠加功能的第 2 周期 here。背景的不透明度控制工作正常，但我需要文本为纯白色。我尝试了以下方法来修改它，但无法让它正确响应。

循环代码如下：

<div class="cycle-slideshow" 
data-cycle-fx=fade
data-cycle-timeout=5000
data-cycle-pager=".cycle-pager"
>
<!-- empty element for overlay -->
<div class="cycle-overlay"></div>

<img src="images/slider-1.jpg" 
data-cycle-title="From Your Door to our Store!" 
data-cycle-desc="Learn about our route services...">
<img src="images/slider-2.jpg" 
data-cycle-title="From Your Door to our Store!" 
data-cycle-desc="Learn about our route services...">
</div><!-- /.cycle-slideshow -->
<div class="cycle-pager"></div>

这是我试过的CSS：

.cycle-overlay div {
    font: small-caps 400 32px "futura-pt",sans-serif;
    color: #fff; 
    opacity: 1;
    z-index: 1000; 
}

对于解决此问题的任何指导，我将不胜感激。

Answer 1

在那种情况下你不应该使用不透明度。将背景颜色与 rgba 一起使用。这是您应该编写的代码：

.cycle-overlay {
    background-color: rgba(0,0,0,.5);
}

并删除 opactiy。如果你想要它 100% 黑色，你可以使用十六进制代码。如果您想要半透明背景，请改用 rgba。最后的 "a" 表示 alpha 值。所以，它就像不透明一样工作。

如何使 Cycle 2 覆盖文本不透明？

How do I make Cycle 2 overlay text non-transparent?

css

jquery-cycle2