texte couleur inverséeFermé

Question

Bonjour, 

Je suis en train de coder un site et j'aimerais que mes textes soient en couleurs inversées par rapport à l'arrière plan. 
C'est à dire qu'avec filter: invert(1) la couleur est inversée par rapport à la couleur par défaut du texte, mais ce que j'aimerais c'est que le texte agisse comme un filtre par rapport à l'arrière plan.
Donc si j'ai par exemple une image noire, que le texte devienne automatiquement blanc et vice versa mais que ça fasse effet bel et bien par rapport à l'image et non à la couleur par défaut du texte.

Une idée pour obtenir ce résultat ? 
Merci d'avance pour vos réponses.

topoa · Answer

Bonjour,
par rapport à l'arrière plan c'est facile si c'est une couleur unie.
Avec une image c'est compliqué voire impossible puisqu'il faut connaître la couleur de tous les pixels de l'image, calculer la moyenne générale...et trouver donc la couleur 'opposée'.
Avec un fond uni il n'y a pas ce genre de problème.

Sinon utilisez la semi-transparence avec une couleur indiquée avec CSS rgba() et un blanc ou noir semi-transparent entre l'image et le texte(en couleur de fond).

Pour avoir réellement un effet négatif sur une image vous pouvez utiliser Python ou Canvas, certes c'"est lourd comme solution juste pour un effet de texte sur un titre donc à éviter sauf si on aime perdre du temps sur des trucs douteux.

Voici un exemple avec Canvas (image en négatif à adapter au texte).
https://www.htmlgoodies.com/html5/other/create-negative-blur-and-rotate-image-effects-using-the-html5-canvas.html

Alainpre · Answer

Je pense qu'il faut regarder du côté des propriétés blend-mode. Malheureusement ces propriétés sont encore mal gérées par les navigateurs.

Un tuto : http://stylescss.free.fr/v2-properties/blend-mode.php
Des exemples : https://www.hongkiat.com/blog/css3-mix-blend-mode/

Texte couleur inversée

2 réponses

Discussions similaires

Newsletters