CSS z-index 999 ne fonctionne pas sur le navigateur Google Chrome et Safari

Nous devons afficher la couleur du texte en blanc sur le texte du curseur. Pour cela, nous appliquons une couleur de fond noire avec 0,65 opacité CSS sur l'image du curseur pour afficher le texte blanc du curseur lisible. Pour l'opacité nous imputons suivant CSS:CSS z-index 999 ne fonctionne pas sur le navigateur Google Chrome et Safari

.zlslides .ms-slide-link { background-color: rgb(0, 0, 0); opacity: 0.65; } Suite est un texte de curseur HTML: <h2 class="master_event_title">Brasil Loves Baile Funk ft Naldo • Dance Party</h2>

Suite est CSS pour le texte:

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

Après l'application ci-dessus CSS avec z-index: 999; affichage du texte du curseur en couleur blanche.

Mais le problème est que la couleur du texte du curseur n'affiche que la couleur blanche dans le navigateur Fire Fox. Dans la couleur du texte du curseur Google Chrome et Safari, le curseur ne s'affiche pas en couleur blanche. Sans index z: 999; le texte ne s'affiche pas en couleur blanche. Pour Google Chrome et Safari couleur du texte du curseur du navigateur nous imputons CSS suivant:

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

Mais au-dessus de CSS ne fonctionnait pas. Si quelqu'un connaît cette solution, alors rejouez-moi. Ici, j'ai joint la capture d'écran des problèmes de navigateur Google Chrome. Alors, s'il vous plaît, revoyez ça.

Merci, Ketan.

Source

2016-11-22 Ketan

Avez-vous besoin d'afficher du texte en haut de l'image? Ou vous voulez montrer un texte différent sur différentes images dans une diapositive? – Veer

S'il vous plaît fournir un exemple simplifié de votre problème à https://jsfiddle.net/ ou d'autres sites similaires – chrona

@Veer Je pense que l'exigence est d'afficher du texte sur le dessus de l'image, et de rendre le texte lisible, Il veut ajouter une opacité sombre sur l'image. –

-1

au lieu d'utiliser des propriétés distinctes pour arrière-plan couleur et l'opacité, utilisez:

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

Source

2016-11-22 09:44:04 hdev

C'est une bonne pratique mais ce n'est pas une réponse ici! –

Ce n'est pas ce que l'OP a demandé, je voudrais mettre cela comme commentaire sous la question. – Dorvalla

Pour être honnête, cela peut effectivement être une solution à la question. La question elle-même n'est pas claire et nécessite un exemple reproductible. –

avez-vous essayé de placer le z-index de l'arrière-plan à une valeur de pile inférieure à celle du texte?

La propriété z-index spécifie l'ordre de la pile d'un élément.

Un élément avec un ordre de pile supérieur est toujours devant un élément avec un ordre de pile inférieur.

Source

2016-11-22 09:55:46 JSouthward

CSS z-index 999 ne fonctionne pas sur le navigateur Google Chrome et Safari

Répondre

Questions connexes