Bordo CSS sull'immagine PNG con parti trasparenti

Question

Sto cercando di aggiungere un bordo su un'immagine PNG che ho (Esempio incluso). Il fatto è che quando aggiungo il bordo al momento lo aggiunge su una forma quadrata attorno a tutta l'immagine e non sul vettore esatto (il significato include le parti trasparenti nell'immagine).

C'è un modo possibile per configurare la configurazione del bordo che non considererà l'area trasparente. (? Anche se non in CSS ... Forse HTML5/JS)

Answer 1

Mi sono imbattuto in bisogno di fare questo io stesso - si avvicinò con questo hack. Una serie di immagini sovrapposte dietro il mio originale che erano leggermente fuori fase l'una con l'altra. Contesto ctx3 è una copia dell'immagine originale e ciò replicherebbe più volte una sagoma bianca dietro l'originale.

 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); 

Answer 2

A partire da ora (31 Gennaio 2015) c'è un modo per farlo senza l'utilizzo di tela, con CSS puro, e con solo 2 righe di codice.

Il trucco sta usando il css filter e -webkit-filter oggetti da disegnare due ombre senza sfocatura, uno per l'asse positivo e uno per il negativo, che avvolgere intorno all'immagine, che fornirà il (spera) effetto desiderato.

Nota: i filtri CSS non sono supportati in IE (speriamo che Spartan funzioni meglio), ecco uno compatibility table.

Questo primo frammento (fiddle) applicherà il limite più semplice possibile.

img { 
 
    -webkit-filter: drop-shadow(1px 1px 0 black) 
 
        drop-shadow(-1px -1px 0 black); 
 
    filter: drop-shadow(1px 1px 0 black) 
 
      drop-shadow(-1px -1px 0 black); 
 
} 
 

 
body { 
 
    background-color: lightcoral; 
 
}

<img src="http://i.imgur.com/GZoXRjS.png" width="250">

Come si può vedere, alcune immagini (come this awesome baymax render) hanno bisogno di un po 'più di ritocco, è possibile vedere il bordo destro è un po' più piccolo del sinistro.

Con questo in mente, ecco lo snippet di bordo perfezionato (fiddle) con un tweak di valore davvero molto piccolo.

img { 
 
    -webkit-filter: drop-shadow(2px 1px 0 black) 
 
        drop-shadow(-1px -1px 0 black); 
 
    filter: drop-shadow(2px 1px 0 black) 
 
      drop-shadow(-1px -1px 0 black); 
 
} 
 

 
body { 
 
    background-color: khaki; 
 
}

<img src="http://i.imgur.com/GZoXRjS.png" width="250">

che dovrebbe coprire i bordi abbastanza bene, ma possiamo ancora avere più divertimento con questo, guardate questo impressionante effetto leggerezza snippet (fiddle).

img{ 
 
    -webkit-filter: drop-shadow(1px 1px 0 black) 
 
        drop-shadow(-1px -1px 0 white); 
 
    filter:drop-shadow(1px 1px 0 black) 
 
      drop-shadow(-1px -1px 0 white); 
 
} 
 

 
body{ 
 
    background-color:lightblue; 
 
}

<img src="http://i.imgur.com/GZoXRjS.png" width="250">

Spero che questo aiuti chiunque chiedendo circa la possibilità di un bordo avvolgente per le immagini semitrasparenti!

Answer 3

Ho esteso la risposta in alto un po 'meglio per il mio utilizzo.

-webkit-filter: drop-shadow(2px 2px 0 white) 
 
\t \t drop-shadow(-2px 2px 0 white) 
 
\t \t drop-shadow(2px -2px 0 white) 
 
     \t \t drop-shadow(-2px -2px 0 white); 
 

 
\t filter: drop-shadow(2px 2px 0 white) 
 
\t \t drop-shadow(-2px 2px 0 white) 
 
\t \t drop-shadow(2px -2px 0 white) 
 
     \t \t drop-shadow(-2px -2px 0 white);

Se qualcuno ha bisogno ancora.