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

bonjour
tu peut mettre ici ton image pour vérifier qu'elle est bien transparente ?

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.

ou le caractere X
Modifié par drphilgood (11 Jan 2024 - 10:45)

Bonjour,

drphilgood a écrit :
ou le caractere X

Le caractère "X" pour faire une croix n'est utilisé que par les gens de peu de foi.

Surtout, on a aucune garantie que ce sera bien dans le navigateur de l'internaute une croix positionnée comme on le souhaite à moins de faire des efforts considérables sans rapport avoir le besoin.

Amicalement,

Je suis alors de peu de foi
et vais revoir mon code car j'ai utilisé une croix pour fermer une biographie. Par contre, pas sur un menu hand burger. Pour le moment, je n'ai pas de problème avec cette croix, sur différents navigateurs et systèmes. Mais je n'ai pas testé partout.

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)

En attendant, dans la suite de Niuxe et de Parsimonhi, voici la même chose en SVG :

<svg xmlns="http://www.w3.org/2000/svg" height="16" width="12" viewBox="0 0 384 512">
  <path d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z"/>
</svg>

Je n'ai rien inventé, ce SVG provient de Font Awersome.
Modifié par Olivier C (11 Jan 2024 - 12:47)

Merci Olivier pour ton exemple, ça marche mais il continue à afficher un fond de couleur parasite comme le montre cette capture écran :


Comment tu as appliqué les coordonnées ?
Quel logiciel tu as utilisé ?

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)

ObiJuanKenobi a écrit :
Merci Olivier pour ton exemple, ça marche mais il continue à afficher un fond de couleur parasite...

Ce SVG je l'utilise pour moi-même. Regarde sur cette page d'icônes et tu verras qu'il n'y a aucun problème : Icons
J'injecte le SVG via une référence <use> et non via une <img> ou <object>.

ObiJuanKenobi a écrit :
Comment tu as appliqué les coordonnées ? Quel logiciel tu as utilisé ?

Je sais créer les SVG, mais celui-ci je l'ai pris sur Font Awesome, comme je te l'ai dis plus haut.

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,

YEAAAAH !!!! J'ai trouvé !
J'avais attribué une classe à la balise <dialog> qui contient l'<img> important la croix de fermeture.
J'avais juste enlevé la bordure qui s'affichait par défaut :

border: none;

J'ai donc mis :

background-color: transparent;

et le fond gris a disparu.

Il y avait bien une couleur de fond dans le conteneur de l'image mais je ne sais pas pourquoi il a ajouté cette couleur, surtout que je n'ai rien définit à la balise <img>.
Mais bon, mon problème est résolu et je vous en remercie de m'avoir aiguillé.
Modifié par ObiJuanKenobi (11 Jan 2024 - 14:01)

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)