web-dev-qa-db-ja.com

透明部分のあるPNG画像のCSSボーダー

私が持っているPNG画像（例を含む）に境界線を追加しようとしています。実際のところ、ボーダーを追加すると、正確なベクトルではなく、すべての画像の周りのボックス形状に追加されます（つまり、画像に透明な部分が含まれていることを意味します）。

透明領域を考慮しないボーダーの設定をセットアップする方法はありますか？ （CSSでなくても... HTML5/JSでしょうか？）

Example image

enter image description here

htmlimagecsspng
28
nimi

現在のところ（January 31st 2015）canvasを使用せずに、純粋なCSSを使用して、コードを2行だけで実行する方法があります。

トリックは、css filterプロパティと-webkit-filterプロパティを使用して、ぼかしなしの2つのドロップシャドウを描画します。 （うまくいけば）望ましい効果。

注：cssフィルターは、IE（Spartanがより良いことを望む）でサポートされていません）、ここに- 互換性テーブル 。

この最初のスニペット（ fiddle ）は、最も単純な境界線を適用します。

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

ご覧のとおり、一部の画像（ this awesome baymax render など）にはもう少し調整が必要です。ボーダーは左より少し小さいです。

これを念頭に置いて、ここに完成したボーダースニペット（ fiddle ）ほんの小さな値のTweakで。

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

ボーダーはかなりうまくカバーされているはずですが、これでもっと楽しいことができます。この素晴らしい軽量効果のスニペット（ 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">

これが半透明の画像の回り込み境界線の可能性について疑問に思う人を助けることを願っています！

48
undefined

私は自分の使用に適したトップアンサーを少し拡張しました。

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

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

まだそれが必要な場合。

15
COOLGAMETUBE

質問の3年はまだ有効です。 （元々）より太いストロークが必要だったので、結局、8つのドロップシャドウ（コンパスの各ポイントに1つ）を使用して、見栄えをよくしました。

奇妙なことに、xオフセットとyオフセットが1pxの8つのシャドウを使用すると、幅が約5pxのアウトラインが生成されますが、色に透明度を導入すると、少し柔らかく非常に魅力的な結果に戻すことができます。

img {
    --stroke-pos: 1px;
    --stroke-neg: -1px;
    --stroke-color: rgba(0, 255, 0, 0.2);
    filter: drop-shadow(var(--stroke-pos) 0 0 var(--stroke-color)) 
      drop-shadow(var(--stroke-neg) 0 var(--stroke-color))
      drop-shadow(0 var(--stroke-pos) 0 var(--stroke-color))
      drop-shadow(0 var(--stroke-neg) 0 var(--stroke-color))
      drop-shadow(var(--stroke-pos) var(--stroke-pos) 0 var(--stroke-color)) 
      drop-shadow(var(--stroke-pos) var(--stroke-neg) 0 var(--stroke-color))
      drop-shadow(var(--stroke-neg) var(--stroke-pos) 0 var(--stroke-color))
      drop-shadow(var(--stroke-neg) var(--stroke-neg) 0 var(--stroke-color));   
}

ご覧のとおり、ここではCSS変数（またはSass/Less）が役に立ちます。

0
MSC

これを自分で行う必要が出てきた-このハックを思いついた。オリジナルの背後にある、互いに少しずれた一連のオーバーレイ画像。コンテキストctx3は元の画像のコピーであり、元の画像の背後にある白いシルエットを数回複製します。

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