Pourquoi j'ai un fond de couleur parasite ?

Bonjour à vous tous,

Je viens de dessiner une croix de fermeture de fenêtre dans Illustrator et je l'ai enregistrée au format PNG pour que le fond blanc ne soit pas pris en compte. Mais une fois importé dans une page web, j'ai un bloc d'une couleur bizarre qui entourage la croix comme le montre la capture écran ci-dessous (j'ai zoomé au maximum pour bien voir cette couleur, autrement à 100 % elle est un peu invisible) :


Voilà comment se présente le fichier dans Illustrator :


Pour enregistrer ce fichier au format PNG, je suis passé par :

puis :


Je précise que dans la page web, je n'applique aucun style CSS à cette image importée.
Quelqu'un saurait me dire pourquoi j'ai cette couleur parasite qui apparaît ?

Merci à vous

Quand j'ouvre l'image PNG dans Photoshop, on voit bien le fond transparent :

si je l'ouvre avec Illustrator, on ne voit pas la transparence, il y a un fond blanc à la place.

Mais si tu regardes bien, la couleur de fond parasite dans la page web se prolonge à l'extérieur de la croix.
Modifié par ObiJuanKenobi (11 Jan 2024 - 09:56)

Salut,

Pourquoi un png ? Un SVG serait plus adapté.

Salut,

Ton fond gris à l'air beaucoup plus grand que ton image di coup je pencherai pour un background sur l'élément dans lequel tu as mis ton image.

Bonjour,

T'es sûr que ce n'est pas le block qui entoure l'image qui a un fond gris ?

Amicalement,

PS: je pense comme niuxe. On est en 2024, et en 2024, on fait les "croix de fermeture" en svg.

il y a bien sur un caractère "croix" mais curieusement il ne s'affiche pas ici.

×

zut alors, je viens de reçevoir un message du vatican comme quoi j'étais excommunié.
Modifié par drphilgood (11 Jan 2024 - 12:12)

niuxe a écrit :
Salut,

Pourquoi un png ? Un SVG serait plus adapté.

J'ai texté au format .svg mais il ne m'affiche pas la croix, juste le fond de couleur parasite.

<img src="../img/bouton_fermeture_dialogue.svg" alt="Icône de fermeture de fenêtre">

J'ai testé aussi avec la balise <object> car elle manipule mieux les fichiers au format SVG.

<object type="image/svg+xml" data="../img/bouton_fermeture_dialogue.svg" width="16" height="16">
        <!-- Image alternative cas d'échec du chargement -->
        <img src="../img/bouton_fermeture_dialogue.png" alt="Icône de fermeture de fenêtre">
    </object>

Je précise que je n'ai attribué aucune propriété CSS à cette image importée, par de dimensions, pas de fond de couleur, pas d'agrandissement ou de réduction, etc.
Modifié par ObiJuanKenobi (11 Jan 2024 - 12:27)

Bonjour,

La balise <object> n'a pas de raison de mieux traiter les fichiers svg que la balise <img> en 2024.

ObiJuanKenobi a écrit :
Je précise que je n'ai attribué aucune propriété CSS à cette image importée, pas de dimensions, pas de fond de couleur, pas d'agrandissement ou de réduction, etc.

Si tu fais clic droit sur l'image + inspecter, que dit l'inspecteur concernant les styles de l'image et concernant les styles de balises qui l'entourent ?

Parce que si tu as toujours un fond de couleur grise en remplaçant l'image png par l'image svg, bah, c'est à peu près sûr que le fond gris concerne un des conteneurs de l'image.

Amicalement,

drphilgood a écrit :
il y a bien sur un caractère "croix" mais curieusement il ne s'affiche pas ici.

×

zut alors, je viens de reçevoir un message du vatican comme quoi j'étais excommunié.

Modifié par Bongota (11 Jan 2024 - 12:48)

Bonjour,

Chez Font Awersome, parfois, ça bricole.

Une version plus simple de svg pour faire une croix :

<svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg" fill="none" stroke="#000">
	<path stroke-linecap="round" d="M4-4L-4 4M-4-4L4 4"/>
</svg>

Je viens de la fabriquer avec un simple éditeur de texte.

Amicalement,

Bonjour,

drphilgood a écrit :
il y a bien sur un caractère "croix" mais curieusement il ne s'affiche pas ici.

×

Il ne s'affiche pas sur le forum car les caractères qu'on peut afficher dans nos messages sont limités à un sous-ensemble de l'ensemble des caractères.

Ceci étant, même en utilisant ce caractère, ça peut être difficile à centrer. Et ça obligerait en théorie à imposer une police de caractère spécifique (car toutes les polices ne vont pas afficher ce X exactement de la même manière, et pour centrer ton caractère, tu vas forcément devoir choisir une police et combiner en fonction de cette police), et pour être certain que l'internaute a bien cette police (car rien ne garantit qu'il a la police que tu auras choisie), il faudrait la télécharger avec la page. Bref, beaucoup d'effort pour un résultat qui à toutes les chances d'être en plus de l'à-peu-près.

Amicalement,

parsimonhi a écrit :

Une version plus simple de svg pour faire une croix :

<svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg" fill="none" stroke="#000">
	<path stroke-linecap="round" d="M4-4L-4 4M-4-4L4 4"/>
</svg>

Je viens de la fabriquer avec un simple éditeur de texte.

Oui c'est clairement la meilleure approche sur le long terme.

Si je peux me permettre, je t'invite à ne pas mettre de couleur "en dur" dans ton élément, mais plutôt de remplacer le

stroke="#000"

en

stroke="currentColor"

voire mieux

stroke="var(--text-color)"

que tu pourras aisément modifier à la volée... à condition que ton élément soit inséré inline dans le HTML évidemment.
Modifié par Raphael (11 Jan 2024 - 14:14)