CSS sur la Frontière d'image PNG avec la transparence des pièces

Im essayant d'ajouter une bordure à une image PNG que j'ai (Exemple inclus).
Le truc c'est que quand j'ajoute de la frontière actuellement, il l'ajoute sur une forme de zone autour de l'ensemble de l'image et pas sur le vecteur (ce qui Signifie qu'il comprend les parties transparentes de l'image).

Est-il possible pour la configuration de l'installation de la frontière qu'il n'envisage pas de la zone transparente. (Même si ce n'est dans le CSS... Peut-être HTML5/JS?)

CSS sur la Frontière d'image PNG avec la transparence des pièces

CSS sur la Frontière d'image PNG avec la transparence des pièces

Même si l'image est au format png transparent, la frontière est appliquée à l'élément, qui est encore essentiellement un carré autour de l'image. Il n'y a pas de solution malheureusement, pourquoi ne pouvez-vous pas faire de la frontière sur l'actul image?
Pouvez-vous illustrer ce que vous voulez l'image + la frontière?
Salut Jon, j'ai ajouté l'image d'un exemple de la façon dont j'aimerais qu'il affiche.
Vous pouvez essayer de jouer avec Raphaël. raphaeljs.com. Ou le chargement de votre image dans un HTML5 canvas et de faire de votre frontière avec la côte-script de détection (aïe!).
Il vous alors, vous avez un joli vert frontière! ;-). Mais plus sérieusement - que vous n'allez pas y parvenir sans le dessin de la frontière sur l'image vous-même.

OriginalL'auteur nimi | 2012-10-02

  1. 0

    Est venu à travers de devoir faire cela moi - même, est venu avec ce hack. Une série d'images superposées à l'arrière de mon origine qui ont été légèrement décalés les uns avec les autres. Contexte ctx3 est une copie de l'image originale et ce serait de reproduire une silhouette blanche derrière l'original à plusieurs reprises.

          ctx3.shadowColor = "rgba(255,255,255,1)";
      ctx3.globalCompositeOperation = 'source-over';
      ctx3.shadowOffsetX = 2;
      ctx3.shadowOffsetY = 2;
      ctx3.shadowBlur = 0;
      ctx3.drawImage(YourImageSource,0,0);
      ctx3.shadowOffsetX = -2;
      ctx3.shadowOffsetY = -2;
      ctx3.shadowBlur = 0;
      ctx3.drawImage(YourImageSource,0,0);
      ctx3.shadowOffsetX = -2;
      ctx3.shadowOffsetY = 2;
      ctx3.shadowBlur = 0;
      ctx3.drawImage(YourImageSource,0,0);
      ctx3.shadowOffsetX = 2;
      ctx3.shadowOffsetY = -2;
      ctx3.shadowBlur = 0;
      ctx3.drawImage(YourImageSource,0,0);
      ctx3.shadowOffsetX = 0;
      ctx3.shadowOffsetY = 2;
      ctx3.shadowBlur = 0;
      ctx3.drawImage(YourImageSource,0,0);
      ctx3.shadowOffsetX = 0;
      ctx3.shadowOffsetY = -2;
      ctx3.shadowBlur = 0;
      ctx3.drawImage(YourImageSource,0,0);
      ctx3.shadowOffsetX = 2;
      ctx3.shadowOffsetY = 0;
      ctx3.shadowBlur = 0;
      ctx3.drawImage(YourImageSource,0,0);
      ctx3.shadowOffsetX = -2;
      ctx3.shadowOffsetY = 0;
      ctx3.shadowBlur = 0;
      ctx3.drawImage(YourImageSource,0,0);

    OriginalL'auteur Darren