Comment ajouter de l'ombre autour d'une image png avec transparence?

Question

Je veux ajouter une ombre à pngs avec transparence.

Automatiquement, cela signifie que l'ombre de la boîte est absente - l'ombre est rectangulaire/autour du cadre de l'image.

ombre portée aussi essayé:

-webkit-filter: drop-shadow(0px 0px 250px rgba(255, 255, 255, 0.4)); 
filter: drop-shadow(0px 0px 250px rgba(255, 255, 255, 0.4)); 

Il ressemble beaucoup, mais les performances, en particulier sur Chrome, est très lent. La seule alternative que je connaisse est d'ajouter l'ombre dans l'image elle-même, mais l'ombre a une large diffusion (donc la taille de l'image est énorme) et avec la compression, elle aurait l'air horrible.

Y a-t-il d'autres options/suggestions?

Answer 1

Puisque la propriété filter est considérée comme expérimentale pour le moment, je ne m'attendrais pas à ce qu'elle soit très rapide. Je ne m'attendrais même pas à ce qu'il fonctionne dans tous les navigateurs (je vous parle, Internet Explorer!). Donc, je recommande d'éviter ce genre de fonctionnalité pour le moment.

Alors, que pouvez-vous faire? À mon avis, il y a deux options, selon l'apparence de votre image.

1) Vous pouvez soit en faire une image SVG et ajouter l'ombre portée. Pour plus d'informations à ce sujet, s'il vous plaît lire this question. 2) Ou, si le fichier png est trop compliqué pour un SVG, vous pouvez ajouter le dropshadow dans l'image en utilisant des outils comme Photoshop ou paint.NET.