Changer la couleur des lettres en fonction de l'image de fond

Bonjour,

J'ai une image de fond à mon site qui comporte des zones claires et des zones sombres.
Sur cette image, j'aimerais mettre du texte texte et j'aimerais que la couleur des lettres s'adapte en fonction de l'image de fond, pour que chaque lettre soit lisible...

Je ne souhaite donc pas modifier la couleur générale de l'entièreté du texte avec un simple "color:#xxxxxx" car pour assurer la lisibilité, il faut que certaines lettres soient en couleur claire et d'autres en couleur foncée... Et je ne souhaite pas non plus mettre un fond gris à moitié transparent car je ne souhaite pas "séparer" visuellement le texte de l'image de fond...

Est-ce que vous auriez des tuyaux pour se débrouiller dans pareille situation ?

D'avance merci pour vos conseils !!

Trucmuche

oué, en javascript tu peux

j'espere que t'es bon en math.

voila un exemple que j'ai fait :

http://jsfiddle.net/PXJ2C/

inspire t'en, là c'est pour un text, il faut que tu adapte le calcul pour chaque lettre de ton text... donc il faut séparer chaque lettre de ton text dans une div ou autre et appliquer le test pour chaque.
Modifié par JENCAL (21 Jul 2015 - 16:18)

Bonjour,

C'est possible en CSS3 avec mix-blend-mode : https://css-tricks.com/almanac/properties/m/mix-blend-mode/
(un autre exemple ici : http://codepen.io/tevko/pen/mJGJNM )

Mais la compatibilité n'est pas encore très forte

Sinon, en général :
- un bandeau de couleur sous ton texte
- des ombrages sur les lettres (text-shadow)

Font souvent le boulot
Modifié par Raphael (22 Jul 2015 - 14:38)

Bonjour,

trucmuche2005 a écrit :
pour assurer la lisibilité, il faut que certaines lettres soient en couleur claire et d'autres en couleur foncée...

Mis à part le petit défi technique sympatoche que ça pose j'ai de sérieux doute quand à la "lisibilité" d'une telle solution hein...

Raphael a écrit :
Bonjour,

C'est possible en CSS3 avec mix-blend-mode : https://css-tricks.com/almanac/properties/m/mix-blend-mode/
(un autre exemple ici : http://codepen.io/tevko/pen/mJGJNM)

Merci pour le premier lien, la lisibilité n'est pas folle, mais cela pourra me servir un jour.
le deuxieme lien y'a une parenthèse à la fin qui faut faire sauté.