Comment maintenir l'ordre d'empilement malgré le survol du filtre WebKit en CSS ?

Modifications de l'ordre d'empilement dans le survol du filtre Webkit : comprendre les contextes d'empilement

Un problème curieux se pose concernant l'ordre d'empilement lors de l'application d'un filtre WebKit : lors du survol sur une image, l’ordre change de manière inattendue. Pour résoudre ce défi sans perturber les autres éléments du site, plongez dans les subtilités des contextes d'empilement.

Les contextes d'empilement dictent l'ordre dans lequel les éléments sont affichés sur la page. Un élément crée un nouveau contexte d'empilement lorsque ses propriétés de style incluent certaines valeurs, telles qu'une transformation, un débordement ou un filtre.

Dans l'exemple fourni, lorsqu'un filtre WebKit (niveaux de gris) est appliqué à l'image, un le contexte d’empilement est automatiquement établi. Ce contexte nouvellement créé entraîne le positionnement du div (".slide-content") en position absolue sous l'image, ce qui entraîne son masquage.

Pour éviter ce comportement indésirable et conserver l'ordre d'empilement d'origine, voici un solution révisée :

Remplacez ce CSS :

<code class="css">li a:hover img {
  -webkit-filter: grayscale(100%);
}</code>

Par cette alternative, qui évite de créer un contexte d'empilement :

<code class="css">li a:hover img::before {
  content: "";
  background-color: rgba(0, 0, 0, 0.5);
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  filter: grayscale(100%);
  z-index: -1;
}</code>

En utilisant un pseudo-élément (: :before) avec une position absolue et en la plaçant sous l'image, nous simulons efficacement l'effet d'un filtre sans créer de nouveau contexte d'empilement. Cette solution de contournement astucieuse vous permet d'obtenir l'effet visuel souhaité tout en préservant l'ordre d'empilement prévu.

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!