How to make inline png <img> transparent using css?

Question

How to make inline png transparent inside div? using css

<div id="report'>
<p> some text </p>

<img src=transparent.png" />

</p>

</div>

this is image for example . Other than ball i want to make transparent other white area. Which is looking grey in IE6

I want to do in css like this div#report img {.....} is it possible?

Edit:

I don't want to make whole image transparent

Update:

Here i added example http://jsbin.com/ubabo3

Answer 1

The opacity property applies to all elements (in supporting browsers).

Answer 2

I'm not sure I understand, but you can make an image completely transparent (i.e. invisible):

div#report img { visibility: hidden } // Still takes up space
div#report img { display: none } // Hidden entirely - 

it is not possible, however, to apply this only to png images, at least not in CSS 2.1. It's surely possible using some additional jQuery magic by using a selector that checks for .png in the src property.

Answer 3

Try this:

div#report img{
    background-color/**/: #000000;
    background-image/**/: none;
    opacity: 0.7;
    filter: alpha(opacity=70);
}

Answer 4

IE 6 does not support transparent png files per default. You need to use a small hack to achieve transparent png files.

http://support.microsoft.com/?scid=kb%3Ben-us%3B294714&x=12&y=11

Answer 5

You can't add support for PNG translucency to IE6 using CSS. There are hacks (some of which involve, IIRC, calling ActiveX stuff into a stylesheet) and Google will find lots for you.

(These days, however, I'd note that IE6 is just a few weeks away from End of Life, has a small marketshare among my target audience, and refuse to do extra work to persuade it to look nice)

Answer 6

I had to deal with IE6 PNG problems before and this worked ..

what you do is add a "behavior" attribute to your

div#report img { behavior: url(iepngfix.htc) } 

and you can download the file - iepngfix.htc here and check the online demonstration .. it explains everything step by step