如何在半透明图像周围绘制边框？ (css)

Question

我想知道如何在半透明的图像周围绘制边框，也就是说，我不需要框形边框，也不需要边框半径，而是实际适用于图像形状的边框本身。

根据this post it's not possible, and this one 简单地建议在某些照片编辑程序（例如 Photoshop）中编辑图像。

但是如果图像输入不是我的怎么办？如果我需要处理一系列用户输入到我的网站的图像并添加该边框，则软件选项将不起作用。

解决这个问题的一种方法是使用 canvas，但是没有一种纯粹、简单的 css 方法吗？谢谢

Answer 1

截至目前（2015 年 1 月 31 日）有一种方法可以在不使用 canvas、使用纯 CSS 且仅使用 2代码行。

诀窍是使用 css filter 和 -webkit-filter 属性绘制两个没有模糊的阴影，一个用于正轴，一个用于负轴，这将环绕图像周围，这将提供（希望）期望的效果。

注意：IE完全不支持css过滤器（希望Spartan做得更好），这里是compatibility table. (Thanks web-tiki)

第一个代码段 (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)，只是对值进行了非常小的调整。

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

希望这对任何想知道半透明图像环绕边框可能性的人有所帮助！

如何在半透明图像周围绘制边框？ (css)

How to draw a border around a semitransparent image? (css)

css

image

png

border