How can you do disappear the background of an image?

Question

I have a website created in MVC4.

I have an image. And I only want to show the shape (an arrow) of the image. And I don't want to show the rest of the image (the background).

enter image description here <= only the white background of the arrows has to be disappeared.

How do you do that?

I tried this, but with this the whole image will disappear, in stead of a part of it:

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

I think that will answer on you question: http://stackoverflow.com/questions/493296/css-display-an-image-resized-and-cropped — Bruniasty, Mar 16 '15 at 09:18
could you provide a working demo to replicate this issue? (for example, you're talking about an image, but I don't see an image in your question) — jbutler483, Mar 16 '15 at 09:26

score 1 · Accepted Answer · answered Mar 16 '15 at 09:33

First of all I think you can use a PNG with alpha channel.

If this is not possible look at this tutorial about how to clip images by using the SVG clip-path. http://www.html5rocks.com/en/tutorials/masking/adobe/

Even though it is possible only in recent browsers.

score 1 · Answer 2 · answered Mar 17 '15 at 06:06

1

Use PNG Images for Transparent Background. You can use any online converter to convert your image to PNG.

answered Mar 17 '15 at 06:06

Muzamil Rafique

147
1
12

score 0 · Answer 3 · answered Mar 20 '15 at 06:15

Apart from the now better supported PNG (and PNG8 with better fallback-support (looking at IE) and a (configurable) transparent color (index from the pallette) instead of alpha, pretty much just like GIF), there is also GIF which has 'always' been supported (and is no longer cumbered with legal issues, which were only due to it's LZW based compression-algorithm, that one can bypass).

Because of the lack of alpha-channel, creating nice transparent PNG8 and GIF images (without the dreaded overly visual grainy (often white) borders) is somewhat of a true art, infact pixel-art.
The trick is to touch-up the borders between color and transparancy by hand AND to set the image's background-color (when rendering from alpha channel to single color-index transparancy) to the average color of the background the images are going to be used against.

The idea of fatter png's is that they have alpha-channels which will give you (for clear example) nice shades (if you had applied such an effect) that will blend with any background. Now with modern browsers, this works pretty nice (and doesn't require the pixel-art). Pixel-art PNG8/GIF can still have it's place though, for base64 encoded ui-elements, usually small icons.

How can you do disappear the background of an image?

3 Answers3