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瀏覽器

回答

相關問題