CSS边界在有透明部分的PNG图象 [英] CSS Border on PNG image with transparent parts

问题描述

我尝试在我有PNG图片上添加边框（包括示例）。
事情是，当我添加边框当前它添加它在框形状周围的所有图像，而不是精确的向量（意味着它包括图像中的透明部分）。

有没有可能的方法来设置边框的配置，它不会考虑透明区域。 （即使不是在CSS ...也许HTML5 / JS？）

解决方案

现在（ 2015年1月31日）有一种方法没有使用画布，纯CSS，只有两行代码。

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

注意：CSS不支持IE Spartan效果更好），这里是 兼容性表 。

此第一个代码段（ 小提示 ）将应用最简单的边框。

  img {-webkit-filter：drop-shadow（1px 1px 0 black） 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.pngwidth =250>  
 

正如你所看到的，一些图像（如 这个令人敬畏的baymax渲染 ）需要更多的调整，你可以看到右边框比左边小一点。

记住这一点，这里是完善的边框片段（

jsdata-hide =false>

  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.pngwidth =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.pngwidth =250>  
 

希望这可以帮助任何人想知道围绕边框的可能性半透明图片！

Im trying to add a border on a PNG image I have (Example included). The thing is that when I add the border currently it adds it on a box shape around all the image and not on the exact vector (Meaning it includes the transparent parts in the image).

Is there any possible way to setup the configuration of the border that it won't consider the transparent area's. (Even if not in CSS... Maybe HTML5/JS?)

解决方案

As of now (January 31st 2015) there is a way to do that without using canvas, with pure CSS, and with only 2 lines of code.

The trick is using the css filter and -webkit-filter properties to draw two drop shadows with no blur, one for the positive axis and one for the negative, which will wrap around the image, which will provide the (hopefully) desired effect.

Note: css filters are not at all supported in IE (let's hope Spartan does better), here is a compatibility table.

This first snippet (fiddle) will apply the simplest border possible.

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

As you can see, some images (like this awesome baymax render) need a little more tweaking, you can see the right border is a little smaller than the left.

With that in mind, here is the perfected border snippet (fiddle) with just a really tiny value 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">

That should cover borders pretty well, but we can still have more fun with this, look at this awesome lightness effect 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 helps anyone wondering about the possibility of a wrap-around border for semitransparent images!

这篇关于CSS边界在有透明部分的PNG图象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！