带有透明部分的PNG图像上的CSS边框

Question

我试图在我拥有的PNG图像上添加边框(包括示例).问题在于,当我添加边框时,它会将其添加到所有图像周围的框形状上,而不是精确的矢量(意味着它包含图像中的透明部分).

是否有任何可能的方法来设置边框的配置,它不会考虑透明区域.(即使不在CSS中......也许是HTML5/JS？)

Answer 1

截至目前(2015年1月31日),有一种方法可以在不使用画布的情况下使用纯CSS,并且只使用2行代码.

诀窍是使用css filter和-webkit-filter属性绘制两个没有模糊的阴影,一个用于正轴,一个用于阴影,它将环绕图像,这将提供(希望)所需的效果.

注意:IE中根本不支持css过滤器(我们希望Spartan做得更好),这是一个兼容性表.

第一个片段(小提琴)将应用最简单的边框.

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

正如你所看到的,一些图像(比如这个令人敬畏的baymax渲染)需要多一点调整,你可以看到右边框比左边小一点.

考虑到这一点,这里是完美的边框片段(小提琴),只有一个非常微小的值调整.

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

这应该很好地覆盖边界,但我们仍然可以享受更多的乐趣,看看这个令人敬畏的轻盈效果片段(小提琴).

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

希望这有助于任何人想知道半透明图像的环绕边界的可能性!

Answer 2

我扩展了最顶层的答案,这对我的使用更好.

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

如果有人仍然需要它.

Answer 3

我通过一些调整实现了这项技术，结果如下：

正如您所看到的，圆形图像看起来不错，其他形状的图标也是如此。

这是我的 css，我为四个边添加了四个规则，每个规则有 5 个像素。

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

因为我使用的是 scss，所以前缀会自动添加。

Answer 4

这个问题三年了仍然有效。由于我（最初）想要更粗的笔触，所以我最终使用了 8 个阴影（罗盘的每个点一个）来使其看起来如此。

奇怪的是，使用 x 和 y 偏移量为 1 像素的 8 个阴影会产生看起来大约 5 像素宽的轮廓，但在颜色中引入透明度似乎有助于将其恢复到稍微柔和但相当有吸引力的结果：

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）。

Answer 5

遇到需要自己做这件事 - 想出了这个技巧。我的原件后面有一系列重叠的图像，彼此之间略有不同步。上下文 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);