[Résolu] Opacity vs z-index

Bonsoir
J'avais oublié le fait que "opacity" a une influence sur le comportement de z-index
J'ai le code suivant (simplifié)

<li class="past">
    <div class="poster">
        <img ....>
    </div>
</li>
<li>.....;</li>

.past {opacity:0.75;}
.poster {position:relative;}
.poster img {
    position:absolute;
    top:0;
   left:0;
   z-index:10;
}

Le résultat c'est que l'image passe au dessous des <li> qui suivent;
Si je supprime .past [opacity:0.75;} tout se passe normalement.

J'ai vérifier que mettre .poster et/ou .poster img à opacity:1 !important n'a aucun effet.

Quelle est la solution pour que tout rentre dans l'ordre ?
Merci de votre aide

Avant toute chose, ne jamais, jamais utiliser opacity.

Utiliser des couleurs rgba (background-color: rgba(255, 255, 255, 0.75) ou hsla (background-color: hsla(70, 95%, 70%, 0.75).

Bonne continuation.

Bonjour,

"... ne jamais, jamais utiliser opacity". Des arguments ou des liens auraient été bienvenus.
Cordialement.
Voici les liens :
http://www.css3.info/introduction-opacity-rgba/
https://stackoverflow.com/questions/13385492/css-opacity-vs-rgba-which-one-is-better
https://www.alsacreations.com/tuto/lire/909-CSS-transparence-couleur-rgba.html

Ok je vois mieux le truc, en effet c'est limité dans la norme:

a écrit :
Since an element with opacity less than 1 is composited from a single offscreen image, content outside of it cannot be layered in z-order between pieces of content inside of it. For the same reason, implementations must create a new stacking context for any element with opacity less than 1

Après de toute façon même si c'était possible l'image serait partiellement transparente (ce qui reste pas terrible).

Sinon tu peux facilement contourner le problème en ciblant en-dessous et en évitant l'image:

li.event.past .eventData > * {
    opacity: 0.7;
}
li.event.past .eventData .poster {
    opacity: 1;
}

p.s. : ces limitations ne sont pas totalement absurdes et ne sont pas causées par un design mal pensé. L'idée est d'économiser sur les performances, l'opacité étant une mécanique gourmande en ressources, il est plus simple de pré-rendre un block avant de lui appliquer de l'opacité plutôt que de gérer l'opacité sur chaque élément individuel (ce qui aurait de plus un autre effet visuel).

@_laurent :

a écrit :
Sur une image ou pour du texte il va falloir hein. Pourquoi ne jamais utiliser opacity ?

On peut tout aussi bien définir le degré de transparence du texte en RGBA ou HSLA.

@Bongota :

Merci, je ne connaissais pas ces articles.
Modifié par thierry (14 May 2019 - 17:43)

kustolovic a écrit :

Sinon tu peux facilement contourner le problème en ciblant en-dessous et en évitant l'image:

li.event.past .eventData > * {
    opacity: 0.7;
}
li.event.past .eventData .poster {
    opacity: 1;
}

C’est bien ce que j’ai voulu faire, mais ça ne marchait pas. Je vais essayer à nouveau demain.

J'ai modifié le css comme suit:

li.event.past {opacity:0.75;}
li.event.past .poster {opacity: 1;}

puis

li.event.past {opacity:0.75;}
li.event.past .poster, li.event.past .poster > * {opacity: 1;}

Le résultat est le même. J'ai laissé le code en ligne pour que vous puissiez le constater et éventuellement faire des modifications avec les outils de debugging des navigateurs. Il y a peut être une solution ???

Remarques:

1) bien entendu, on peut utiliser rgba, mais c'est ce que je voulais éviter de faire, car il faut définir le jeu de couleurs en double. Pour moi dire "opacity:0.75" ça devrait être la même chose que remplacer rgb(x, y, z) par rgba(x ,y, z, 0.75)

2) dire qu'il ne faut pas utiliser opacity est une autre façon de dire que c'est mal conçu

3) en tant qu'ancien concepteur et réalisateur de systèmes, je me permets de vous faire part de mon expérience:
Un produit quelconque (fonctionnalité informatique, avion, maison, moulin à café...) doit être conçu à partir des BESOINS DES UTILISATEURS.
Les "utilisateurs" appartiennent à diverses catégories. Pour une fonctionnalité comme opacity, on a au moins
- les utilisateur finaux: des centaines de millions de personnes qui accèdent à Internet
- les développeurs de sites : quelques millions de personnes, dont nous faisons partie
- les développeur du produit: quelques centaines de personnes sui développent les moteurs CSS
Le problème, c'est que la dernière catégorie est également celle qui décide ce qu'on va implémenter, alors que la deuxième catégorie est un ensemble flou qui n'est représenté par personne lors de la définition. Les préoccupations des développeurs ont donc une tendance à l'emporter sur les besoins des développeurs de sites, qui doivent se comporter en "utilisateurs finauds" pour contourner les insuffisances du produit.

Par ailleurs les développeurs de sites n'ont aucun impact sur le marché: ils ne sont que des intermédiaires par rapport aux utilisateurs finaux, et même ceux là n'ont pas d'impact réel sur le marché.

Pendant des années, c'était IBM qui décidait quelle était la norme, tout le monde devait s'y plier, puis ça a été Microsoft, maintenant c'est Google. Quoi que l'acteur dominant décide, tout le monde doit s'y plier... jusqu'à la prochaine révolution qui amène un nouvel acteur dominant.

Ce qu'il est également intéressant de noter, c'est de constater que plus c'est mal fichu, plus les personnes qui comprennent un peu comment ça marche et surtout ce qu'on peut faire pour contourner les problèmes prennent de l'importance en tant qu'experts et se convainquent que c'est très bien qu'il en soit ainsi....
Une fois de plus, ce n'est pas pour jeter la première pierre: j'ai moi aussi fait partie des "experts" dans d'autres domaines

Salut,

Attention tu n'a pas vraiment appliqué ce que kustolovic proposait :

li.event.past .eventData > * {
    opacity: 0.7;
}
li.event.past .eventData .poster {
    opacity: 1;
}

Il propose de mettre tout les élément au même niveau que .poster à opacity 0.75 sauf .poster.

Ici, si je ne me trompe pas tu met encore le parent a 0.75. Et ca ne changera rien pour les enfants :

li.event.past {opacity:0.75;}

_laurent a écrit :
Salut,

Attention tu n'a pas vraiment appliqué ce que kustolovic proposait :

li.event.past .eventData > * {
    opacity: 0.7;
}
li.event.past .eventData .poster {
    opacity: 1;
}

Il propose de mettre tout les élément au même niveau que .poster à opacity 0.75 sauf .poster.

Ici, si je ne me trompe pas tu met encore le parent a 0.75. Et ca ne changera rien pour les enfants :

li.event.past {opacity:0.75;}

Mon code met à la fois .poster ET ses enfants avec opacity:1
ça ne change rien
SI je laisse .poster à 0.75 et mets ses enfants à 1, c'est la même chose.
Je rappelle l'adresse de la page pour que vous puissiez jouer avec:
https://tests.alma-musica.net/html/calendar.php

Merci de ta réponse.
J'avais mal compris en effet.
Je ne comprends pas pourquoi ça marche, et pourquoi ce que j'avais fait ne marche pas, mais ça marche, c'est le principal !
Je vais essayer de mettre ça dans un coin de ma mémoire, quoi que ma mémoire, à mon âge, n'est plus tout à fait ce qu'elle a été !!!

PapyJP a écrit :
Je ne comprends pas pourquoi ça marche, et pourquoi ce que j'avais fait ne marche pas, mais ça marche, c'est le principal !

Alors, opacity est un peu spécial.

<parent>
    <enfant></enfant>
    <enfant></enfant>
</parent>

Si on réduit opacity sur le parent, lui et tout ses enfants seront transparent.
Si, en plus, on met opacity 1 sur un enfant, cela ne changera absolument rien ! L'enfant est déjà à 1 mais est transparent car son parent l'est.
Si on met un opacity inférieur a 1 sur l'enfant, il cumulera sa propre transparence à celle donnée par son parent.

Mais ici il ne s'agit même pas de ca : On essaie d'éviter de contexte de formatage donné par opacity à poster. Mais si on le met sur le parent (pour éviter de le mettre sur chaque enfant) les enfant en hériteront forcément... la solution consiste donc a mettre l'opacity sur chacun des enfant sauf celui dont on ne veut pas qu'il soit formaté.

Bonne journée