你怎么能消失图像的背景？

Question

我在MVC4中创建了一个网站。

我有一张图片。我只想显示图像的形状（箭头）。而且我不想显示图像的其余部分（背景）。

＆lt; =只有箭头的白色背景必须消失。

你是怎么做到的？

我试过这个，但是这样整个图像就会消失，而不是它的一部分：

.images_top {
    width: 30px;
    text-align: center; 
    vertical-align: top;
     -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
       filter: alpha(opacity=0);
       opacity:0;
}

Answer 1

首先，我认为你可以使用带有alpha通道的PNG。

如果无法做到这一点，请参阅本教程，了解如何使用SVG剪辑路径剪辑图像。 http://www.html5rocks.com/en/tutorials/masking/adobe/

尽管只能在最近的浏览器中使用。

Answer 2

将PNG图像用于透明背景。您可以使用任何在线转换器将图像转换为PNG。

Answer 3

除了现在更好的支持PNG（和PNG8具有更好的后备支持（看IE）和（可配置的）透明色（来自调色板的索引）而不是alpha，几乎就像GIF）一样，GIF也有{{1}}总是＆＃39;得到了支持（并且不再受法律问题的影响，这仅仅是由于它的基于LZW的压缩算法，可以绕过）。

由于缺少alpha通道，创建漂亮的透明PNG8和GIF图像（没有可怕的过度视觉颗粒（通常是白色）边框）在某种程度上是一种真正的艺术，实际上是像素艺术。
技巧是用手触摸颜色和透明度之间的边界并将图像的背景颜色（当从alpha通道渲染到单色指数透明度时）设置为< em>将要使用图像的背景的平均颜色。

胖子png的想法是他们有alpha通道，它会给你（清楚的例子）漂亮的阴影（如果你已经应用了这样的效果）将与任何背景。现在使用现代浏览器，这非常好用（并且不需要像素艺术）。对于base64编码的ui元素，像素艺术的PNG8 / GIF仍然可以拥有它的位置，通常是小图标。