Problème de rendu Figma/Réel

Bonjour à tous !
Je viens vers vous car je sèche sur un problème de rendu de couleurs et je ne vois pas comment remédier au problème ni comment aborder le problème pour trouver une solution.

Sur l'image ci-dessous il y a 2 carrés.
Celui de gauche est réalisé sur Figma et correspond au rendu que je veux. Il y a une image de fond blanche avec des taches colorées. Par dessus il y a un rectangle vert dont l'opacité a été réduite. Et entre les 2 j'ai glissé un rectangle blanc donc j'ai réduit l'opacité également. L'idée c'est de laisser transparaître les taches en fond mais de rendre plus lisible le texte qui se positionnera au milieu du carré. On notera qu'on voit bien sur les contours du rectangle blanc intercalé qu'il se fond avec le blanc de l'image de fond.

Celui de droite est réalisé en html/css. On a le background-image du body qui affiche l'image blanche avec les taches de couleurs, une div en z-index: 4 qui a du vert avec un alpha de 0.1 comme background-color et une div en z-index: 2 qui a du blanc avec un alpha de 0.8 comme background-color (j'ai prix 0.8 comme valeur car c'est ce que j'avais mis sur Figma). Là par contre on voit bien que le blanc de la div intercalée (z-index: 2) et du body ne se fondent pas. J'ai essayé de diminuer l'alpha de la div mais ça éclaircit le blanc sans que jamais ça ne se fonde avec le blanc de l'image de background du body. J'ai essayé de remplacer la propriété alpha par opacity mais ça donne la même chose.

Sauriez-vous comment je dois procéder pour obtenir le même rendu que le carré de gauche ?
Une chose qui me surprend également c'est que, concernant la div en z-index: 2, si je la passe en z-index: 5 (donc au-dessus de l'autre div) le rendu reste le même...

Je vous remercie d'avance pour votre aide.


Modifié par Vahia (01 Apr 2024 - 19:15)

Bonjour,

je n'ai fait que lire en diagonale, désolé, mais 2 pistes néanmoins :
* est-ce que tu veux bien opacity: 0.8 ou plutôt 0.2 ? En CSS, 0.2 c'est quasi-transparent (le mot-clé transparent est équivalent à rgba(0, 0, 0, 0) ou en #rgba => #0000)
* Est-ce Mask compositing que tu cherches à reproduire ? https://css-tricks.com/mask-compositing-the-crash-course/ Ou autres effets (clip plus que mask) https://css-tricks.com/clipping-masking-css/
Modifié par Felipe (02 Apr 2024 - 15:23)

C'est bien 0.8 dont j'ai besoin car je vais insérer du texte par dessus et il faut qu'il soit lisible.

Ce n'est ni mask ni clip.

Bonsoir,

Sans tes couleurs ni images, voici un test qui représenterais plus ou moins ce que tu cherches à faire . https://codepen.io/gc-nomade/pen/WNWdred N’hésites pas copier le codepen à ton compte ou à ajouter des infos sur ce fil. Ce ne sont sont que des couleurs de fond avec une opacité, . Tu peut utiliser des couleurs rgba() où le reglage de l'opacité de 0.0 à 1 est plus intuitif.

cdt

edit , voir https://codepen.io/gc-nomade/pen/GRLyvrm suite au complément d'infos.
Modifié par gcyrillus (03 Apr 2024 - 20:41)

Bonjour,

Je n'utilise pas Figma mais j'ai lu un peu dessus pour ma veille techno : il n'y a pas un éditeur pour récupérer une suggestion de code CSS issu des maquettes ?

L'inverse serait étonnant.

Merci gcyrillus mais ça ne correspond malheureusement pas à ce que je cherche à faire.
Voici un codepen qui reproduit ce que j'ai fait jusque là : codepen.

Bonjour,

Peut-être alors regardé du cote de background-blend-mode: https://developer.mozilla.org/fr/docs/Web/CSS/background-blend-mode

En melangeant les deux couleurs (via deux gradients / images).
https://codepen.io/gc-nomade/pen/GRLyvrm

background: linear-gradient(
      rgba(255, 255, 255, 0.85),
      rgba(255, 255, 255, 0.85)
    ),
    linear-gradient(
      rgba(98, 200, 0, 0.1), 
      rgba(98, 200, 0, 0.1)
    );
  background-blend-mode: multiply;

Salut,

avec ta façon d'imbriquer la divBlanche dans la divVerte, les z-index n'ont pas d'influence
Je pense qu'il faut fermer la divVerte avant de faire la divBlanche pour ne pas la faire remonter en même temps que la divVerte : https://jsfiddle.net/z61dmw75/

Edit : V2 en dégageant la divVerte pour mettre le vert directement sur le background puis en utilisant la proposition de gcyrillus pour le mélange de vert et blanc : https://jsfiddle.net/z61dmw75/1/
Modifié par Mathieuu (03 Apr 2024 - 14:46)

Merci infiniment pour vos réponses, ça marche !