如何讓循環2重疊文本不透明？

我正在使用帶重疊功能的Cycle 2 here。背景的不透明控制工作正常，但我需要文本爲純白色。我已經嘗試了以下來修改它，但無法讓它正確響應。如何讓循環2重疊文本不透明？

下面是循環代碼：

<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; 
}

我將不勝感激任何指導解決這個。

來源

2016-03-13 fmz

在這種情況下，您不應該使用不透明度。在rgba中使用背景顏色。下面是你應該寫代碼：

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

和刪除opactiy。如果你想100％黑色，你可以使用十六進制代碼。如果你想要一個半透明的背景，用rgba代替。最後一個「a」意味着alpha值。所以，這只是像不透明的作品。

來源

2016-03-13 04:55:30 Morven

您好，Morven，我的道歉。我的意思是表明我正在使用Cycle 2（不是Fancybox），它改變了問題的性質和解決方案。 – fmz

解決方案仍然相同。如果你想要一個帶有純文本的半透明背景，你應該使用'background-color：rgba（0,0,0，.5）;'而不是'opacity'。將該樣式應用於正確的'div'並移除'opacity' – Morven

優秀。謝謝。 – fmz

如何讓循環2重疊文本不透明？

回答

相關問題