CSS z-index 999无法在Google Chrome和Safari浏览器上运行

Question

我们需要在滑块文字上显示白色文字颜色。为此，我们在滑块图像上应用黑色背景颜色和0.65不透明度CSS，以显示滑块白色文本可读。对于不透明度，我们应用以下CSS：

.zlslides .ms-slide-link { background-color: rgb(0, 0, 0); opacity: 0.65; } 以下是滑块文本HTML： <h2 class="master_event_title">Brasil Loves Baile Funk ft Naldo • Dance Party</h2>

以下是文字的CSS：

.master_event_title { color: rgb(255, 255, 255); font-size: 30px; font-weight: 700; position: relative; text-align: center; top: 41%; z-index: 999; }

将以上CSS应用于z-index：999;滑块文本显示白色。

但问题是滑块文本颜色仅在Fire Fox浏览器中显示白色。在谷歌浏览器和Safari浏览器中，滑块文本颜色不显示为白色。没有z-index：999;文字不以白色显示。对于Google Chrome和Safari浏览器滑块文字颜色，我们应用以下CSS：

@media screen and (-webkit-min-device-pixel-ratio:0) { .master_event_title{z-index: 999;} }

但是上面的CSS也没有用。如果有人知道这个问题的解决方案，那么请重播我。这里我附加了谷歌浏览器问题的屏幕截图。所以请查看。

谢谢， 科坦。

Answer 1

您是否尝试将背景的z-index设置为比文本更低的堆栈值？

z-index属性指定元素的堆栈顺序。

堆栈顺序较大的元素始终位于堆栈顺序较低的元素前面。

Answer 2

不使用背景颜色和不透明度的单独属性，而是使用：

.zlslides .ms-slide-link {
    background-color: rgba(0, 0, 0 , 0.65);
}