CSS Border auf PNG-Bild mit transparenten Teilen

Question

Ich versuche, einen Rahmen zu einem PNG-Bild hinzuzufügen, das ich habe (Beispiel enthalten). Die Sache ist, dass, wenn ich den Rahmen derzeit hinzufügen es in einer Box-Form um das gesamte Bild und nicht auf dem genauen Vektor (Bedeutung enthält es die transparenten Teile im Bild) hinzugefügt.

Gibt es eine Möglichkeit, die Konfiguration des Rahmens so einzurichten, dass der transparente Bereich nicht berücksichtigt wird. (? Auch wenn nicht in CSS ... Vielleicht HTML5/JS)

Answer 1

Stieß auf, um dies selbst zu tun - kam mit diesem Hack auf. Eine Reihe von überlagerten Bildern hinter meinem Original, die etwas unpassend waren. Kontext ctx3 ist eine Kopie des Originalbildes und würde eine weiße Silhouette hinter dem Original mehrmals replizieren.

 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

Ab sofort (31. Januar 2015) gibt es eine Möglichkeit, das zu tun, ohne Leinwand zu verwenden, mit reinem CSS und mit nur zwei Zeilen Code.

Der Trick filter und -webkit-filter Eigenschaften des CSS verwendet ohne Unschärfe zwei Schlagschatten zu ziehen, eine für die positive Achse und einem für die negativen, die um das Bild herum werden, die die (hoffentlich) liefert gewünschter Effekt.

Hinweis: CSS-Filter sind überhaupt nicht in IE unterstützt (lassen Sie uns hoffen, Spartan ist besser), hier ist ein compatibility table.

Dieses erste Snippet (fiddle) gilt die einfachste Grenze möglich.

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">

Wie Sie ein wenig mehr Zwicken sehen können, müssen einige Bilder (wie this awesome baymax render), können Sie die rechte Grenze ist ein wenig kleiner als der linken Seite.

In diesem Sinne, hier ist die perfektioniert Border Snippet (fiddle) mit nur einem wirklich winzigen Wert zwicken.

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">

Das ziemlich gut Grenzen abdecken sollte, aber wir können noch mehr Spaß mit diesem, an diesem fantastischen Leichtigkeit Effekt sehen 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">

Hope this jemand Gedanken über die Möglichkeit einer Rundum-Grenze für halbtransparente Bilder hilft!

Answer 3

Ich erweiterte die Top-Antwort ein bisschen, das ist besser für meine Verwendung.

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

Wenn jemand es noch braucht.