[RÉGLÉ] Perte transparence image png

[Alain_56]

Bonjour,
J'exporte une image de panneau.png, dont les bords sont arrondis et les angles transparents à la création.

https://ibb.co/0t2NPsK

Lorsque je visualise le panneau sur le site (en local), les angles ne sont plus transparents, mais blancs.
J'ai effectué des tests d'export comme suit:

• PNG8 avec transparence alpha et affichage entrelacé
• PNG24
• PNG32

Rien n'y fait... et je ne trouve pas d'informations claires sur le sujet.

[Colnem30]

Bonjour

Si l'image est transparente et que tu vois du blanc, c'est qu'il y a du blanc dessous, non?

[Alain_56]

Bonjour

Si l'image est transparente et que tu vois du blanc, c'est qu'il y a du blanc dessous, non?

Bonjour Colnem30,
Effectivement, le fond de la page est blanc, mais comme le suggère l'image en lien, j'ai l'impression que les angles ne sont pas transparents !?

https://ibb.co/vhh0Jr0

[lomart]

Bonjour,

Ne serait-ce pas l'ombre portée qui donne cette impression.
Mettre un fond rouge à la page pour s'en assurer.

[Alain_56]

Bonjour,

Ne serait-ce pas l'ombre portée qui donne cette impression.
Mettre un fond rouge à la page pour s'en assurer.

https://ibb.co/MpBL1m3

La copie d'écran confirme que le format de l'image n'intègre pas la transparence aux angles.

[abmag]

Tu es sur que ton image n'est pas dans une cellule ou un block quelconque avec un background blanc ?

[Alain_56]

Bonjour abmag,
L'image est ajoutée dans Image de l'article complet de l'onglet Images et liens d'un article.
J'ai ajouté l'image dans le texte avec le même style, le résultat est identique.
Je ne pense qu'il y ai de block à cet endoit

<p>
<img class="ombre-plaque"
src="images/village/panneau/image.png"
width="500" height="151" loading="lazy"
data-path="local-images:/village/panneau/image.png"/>
</p>

[abmag]

Etrange, je suppose que tu as essayé une autre image.png que tu sais s'afficher correctement sur un autre site ou une autre page ?

Question complémentaire comment s'affiche ton image si tu la mets directement dans le corps de l'article ?

[Alain_56]

Question complémentaire comment s'affiche ton image si tu la mets directement dans le corps de l'article ?

Oui c'est pareil !

Etrange, je suppose que tu as essayé une autre image.png que tu sais s'afficher correctement sur un autre site ou une autre page ?

C'est mon premier essai, connais-tu les notions de format PNG, transparence alpha et affichage entrelacé ?
La solution semble dépendre de ces paramétrages...

[abmag]

J'ai récupéré ton image, l'ai importé dans paint.net refait la transparence et enregistré en profondeur couleur automatique et entrelacé, Elle est pour quelque temps sur cette page de mon site et fonctionne. récupère la quand ce sera fait je l'enlèverai

https://vagabondages.reseau-bretagne.com/accueil-des-voyageurs

[Alain_56]

récupère la quand ce sera fait je l'enlèverai

J'ai récupéré l'image sur ton site https://vagabondages.reseau-bretagne.com/ , dont l'ergonomie est très sympa.
L'image utilisée sur ma page s'affiche comme chez toi SI je n'applique pas le code ombrage déporté.
Par contre avec le css

Paint.net est en cours de téléchargement, il solutionnera peut-être mon soucis.

[abmag]

En tout cas le png n'est pas (plus) en cause. Passe celui là en réglé et ouvre en un autre pour exposer ton problème CSS ce sera plus clair
Paint.net est moins puissant mais aussi plus léger que gimp ou photoshop, mais il est plus simple à prendre en main et gère les calques, ce qui est très pratique.

[lomart]

L'image utilisée sur ma page s'affiche comme chez toi SI je n'applique pas le code ombrage déporté.
Par contre avec le css

C'est normal, l'ombre ou la bordure s'applique à la bounding-box pas à l'image.
Le seul moyen est de créer l'ombre dans le png

[abmag]

et ça peut être fait avec paint.net ...mais ce sera plus fin avec gimp

[Alain_56]

L'utilisation de Paint.net et l'enregistrement Profondeur de couleur "automatique", avec l'option entrelacé ne modifie pas le résultat.
J'aimerais pourtant utiliser l'ombrage avec le css