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

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开发者_C百科 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

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

Try this:

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

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

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.

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)

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