[Résolu] Changer de couleur une partie d'une image

Bonjour/Bonsoir,

Je débute en programmation web et je dois créer une sorte de petit questionnaire/quiz.

Pour une question je voudrais demander à l'utilisateur de choisir les bonnes couleurs pour chaque anneau des JO. Je sais changer le background-color d'une image, sauf que sur le logo, les anneaux se chevauchent entre eux et ça devient un peu compliqué pour moi même en créant une image pour chaque anneau. Je sais utiliser z-index pour superposer les images entre elles.

Si quelqu'un a une solution pour sélectionner seulement une partie d'une image ou bien garder la "vraie" forme d'une image png ou bien une solution tout court ! Je serai ravie.

Bonjour,

Je ne sais pas si j'ai bien compris votre question, mais pour moi le plus simple serait de créer 5 images de même taille avec chacune un anneau avec la bonne couleur.
Les images devront être au format png avec un fond transparent.
Avec cette solution, les images superposées donneront le logo des JO mais découpée en plusieurs images

Gus a écrit :
Bonjour,

Je ne sais pas si j'ai bien compris votre question, mais pour moi le plus simple serait de créer 5 images de même taille avec chacune un anneau avec la bonne couleur.
Les images devront être au format png avec un fond transparent.
Avec cette solution, les images superposées donneront le logo des JO mais découpée en plusieurs images

Je n'avais pas pensé à avoir plusieurs images pour une couleur, merci de ton aide je vais essayer de faire fonctionner tout ça !

Raphael a écrit :
Hello,

Ce serait même possible de le réaliser sans faire appel à des images, en CSS pur : https://codepen.io/AllThingsSmitty/pen/cHjIC/?editors=1100
(Par contre, ce serait sans aucun doute moins accessible)

Oh super ! Je vais essayer de comprendre un peu histoire de réussir à le faire moi-même. Merci beaucoup je savais même pas que c'était possible.

joycin a écrit :

Si quelqu'un a une solution pour sélectionner seulement une partie d'une image ou bien garder la "vraie" forme d'une image png ou bien une solution tout court ! Je serai ravie.

Pour répondre précisément à cette question, il y a la technique de masquage en CSS (peut-être encore peu reconnue par les navigateurs). On peut cacher ou changer la couleur d'une partie d'image, avec une autre image (le masque) ou par un fichier SVG.

Résolu.