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。最后一个＆＃34; a＆＃34;表示阿尔法值。所以，它只是像不透明一样工作。

如何使Cycle 2叠加文本不透明？

1 个答案: