Comment résoudre le problème de l'arrière-plan de grand-père obstruant les pseudo-éléments lorsque le gradient de texte ajoute des ombres?

Solution intelligente: l'ombre du gradient de texte entre en conflit avec le fond des éléments de grand-père

Dans la conception Web, il est très courant de créer des gradients de texte et des ombres avec des pseudo-éléments, mais parfois vous rencontrez le problème des éléments de grand-père occluant des pseudo-éléments en arrière-plan. Cet article analysera ce problème en profondeur et fournira des solutions efficaces.

Tout d'abord, examinons un exemple de code typique, qui peut implémenter les gradients de texte et les ombres:

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

.header {
  Largeur: 100%;
  hauteur: 100px;
  / * L'ajout de couleur d'arrière-plan ici bloquera les pseudo-éléments * / /
  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;
}

.Text :: avant {
  Contenu: att (Texte de données);
  Position: absolue;
  Couleur: transparent;
  Text-shadow: 0 4px 2px bleu;
  Z-Index: -1; / * La valeur négative de l'index z n'est pas valide * /
}

Lors de l'ajout de couleur d'arrière .header plan à l'élément ::before Cela est dû à la nature contextuelle d'empilement des pseudo-éléments. En termes simples, bien qu'un pseudo-élément soit visuellement attaché à l'élément parent, il est au même niveau que les autres éléments enfants de l'élément parent dans l'ordre d'empilement. Même si un z-index négatif est défini, il ne peut pas être laissé derrière le fond de l'élément grand-père.

Solution: ajustez le contexte d'empilement

Pour résoudre ce problème, nous devons mettre à niveau le contexte en cascade de l'élément .text et de ses pseudo-éléments afin qu'il soit plus élevé que l'arrière-plan de l'élément grand-père. Il suffit d'ajouter simplement position: relative; et une valeur z-index positive à l'élément .text :

 .texte {
  Position: relative;
  Z-Index: 1; / * Améliorez l'ordre d'empilement * /
  -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;
}

Avec cette modification, l'élément .text et son pseudo-élément seront correctement rendus à l'arrière-plan de l'élément grand-père, résolvant ainsi le problème d'occlusion. Il s'agit d'une solution simple et efficace sans opérations de contexte en cascade complexes.

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!