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. Цвет текста слайдера браузера Google Chrome и Safari не отображается белым цветом. Без индекса z: 999; текст не отображается в белом цвете. Для цвета текста браузера слайдера Google Chrome и Safari мы применяем следующие CSS:

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

Но выше CSS также не работает. Если кто-нибудь знает об этом, то попробуйте переиграть меня. Здесь я приложил Google Chrome Chrome проблемы с экрана. Поэтому, пожалуйста, просмотрите это.

Спасибо, Ketan.

Answer 1

вместо того, чтобы использовать отдельные свойства для фона цвета и непрозрачности, используйте:

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

Answer 2

вы пробовали установки Z-индекс фона до более низкого значения стеки, чем текст?

Свойство z-index указывает порядок стека элемента.

Элемент с большим порядком стека всегда находится перед элементом с более низким порядком стека.