Lorsque le fond de l'élément grand-père obscurcit les pseudo-éléments, comment résoudre l'effet de l'ajout d'ombres aux gradients de texte?

Résolvez les effets du gradient et de l'ombre de l'occlusion du texte pseudo-élément dans le fond des éléments de grand-père

Lors de la création de gradients de texte et d'effets de l'ombre, nous utilisons souvent des pseudo-éléments et un positionnement absolu. Cependant, lorsque l'élément grand-père (par exemple.<header></header> ) Lorsque vous avez un fond, le pseudo-élément peut être obscurci, ce qui fait disparaître l'ombre. Cet article analyse ce problème et fournit des solutions.

Habituellement, nous mettons en œuvre des gradients de texte et des ombres comme celle-ci:

<div class="header">
  <p class="text" data-text="示例文本">Exemple de texte</p>
</div>

.header {
  Largeur: 100%;
  hauteur: 100px;
  / * Ajouter une couleur d'arrière-plan, les pseudo-éléments seront bloqués ici * /
  Color d'arrière-plan: # F0F0F0; 
}

.texte {
  -Webkit-Text-Fill-Color: transparent;
  Image d'arrière-plan: gradient linéaire (en bas, rouge 0%, vert 100%);
  -Webkit-Background-Clip: Texte;
  Clip d'arrière-plan: texte;
  taille de police: 40px;
  Police-poids: Bold;
  Espacement des lettres: 9px;
  Position: relative; / * Ajouter un positionnement relatif à l'élément parent * /
}

.Text :: avant {
  Contenu: att (Texte de données);
  Position: absolue;
  Couleur: transparent;
  Text-shadow: 0 4px 2px bleu;
  Z-Index: 1; / * Définissez Z-Index sur une valeur positive * /
}

Bien que cela autorise les gradients et les ombres, les pseudo-éléments sont obscurcis lorsque .header a un arrière-plan. Le simple fait d'ajuster z-index de .header ne résout pas le problème, car le contexte en cascade du pseudo-élément est lié à son élément parent.

La racine du problème: la relation hiérarchique entre le contexte empilé et les pseudo-éléments

z-index n'est valide que dans le même contexte d'empilement. Un pseudo-élément appartient au contexte en cascade de son élément parent, de sorte que z-index de l'élément parent n'affecte pas directement le pseudo-élément. La clé est que l'ordre de rendu du pseudo-élément est lié à d'autres éléments de son élément parent, et par défaut, il peut être derrière l'arrière-plan de l'élément parent.

Solution: ajustez le positionnement de z-index et des éléments parents de la pseudo-élémentation

Pour résoudre ce problème, nous avons besoin:

1. Ajouter position: relative; pour l' .text parent z-index

2. Définissez z-index du pseudo-element.text .text::before une valeur positive : cela garantit que le pseudo-élément est au-dessus de l'arrière-plan de l'élément parent.

Grâce aux ajustements ci-dessus, les gradients de texte et les effets de l'ombre peuvent être affichés correctement même si l'élément grand-père a un arrière-plan. Comprendre l'ordre de rendu des contextes en cascade et des pseudo-éléments est crucial pour résoudre de tels problèmes.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!