CSS z-index 999不适用于谷歌浏览器和Safari浏览器

我们需要在滑块文本上显示白色文本颜色。为此，我们在滑块图像上应用0.65不透明CSS的黑色背景颜色以显示可读的滑块白色文本。对于不透明我们应用下面的CSS：CSS z-index 999不适用于谷歌浏览器和Safari浏览器

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

上述申请后带有z-index的CSS：999;滑块文本显示在白色。

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

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

但上述CSS也不能正常工作。如果有人知道这个问题的解决方案，那么请重播我。在这里，我附上了谷歌Chrome浏览器问题的屏幕截图。所以请回顾一下。

感谢，科坦。

来源

2016-11-22 Ketan

所以基本的要求是你需要在图像上显示一些文字？或者您想在幻灯片的不同图像上显示不同的文字？ – Veer

请在https://jsfiddle.net/或其他类似的网站上提供一个简化的问题示例 – chrona

@Veer我认为这个要求是在图像上显示文本，为了使文本可读，他希望添加黑暗的不透明度超过图像。 –

-1

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

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

来源

2016-11-22 09:44:04 hdev

这是一个好习惯，但它不是一个答案！ –

这不是OP所要求的，我会把它作为评论的问题。 – Dorvalla

说实话，这实际上可能是解决问题的方法。这个问题本身不清楚，需要一个可重复的例子。 –

你试过背景的z索引设置为比文字下叠层价值？

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

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

来源

2016-11-22 09:55:46 JSouthward

CSS z-index 999不适用于谷歌浏览器和Safari浏览器

回答

相关问题