Comment faire en ligne png <img> transparent en utilisant css?

Question

Comment faire en ligne png transparent à l'intérieur div? en utilisant css

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

<img src=transparent.png" /> 

</p> 

</div> 

c'est l'image par exemple. Autre que la balle, je veux faire d'autres zones blanches transparentes. Ce qui est à la recherche grise IE6

Je veux faire dans cette div#report img {.....} comme css est-il possible?

Edit:

Je ne veux pas faire toute l'image transparente

Mise à jour:

Ici j'ai ajouté exemple http://jsbin.com/ubabo3

Answer 1

La propriété opacity applique à tous les éléments (en navigateurs de soutien).

Answer 2

Je ne suis pas sûr que je comprends, mais vous pouvez faire une image complètement transparente (ie invisible):

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

il est impossible, toutefois, d'appliquer ce uniquement aux images .png, du moins pas en CSS 2.1. Il est certainement possible d'utiliser une magie jQuery supplémentaire en utilisant un sélecteur qui vérifie .png dans la propriété src.

Answer 3

Essayez ceci:

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

Answer 4

IE 6 ne supporte pas les fichiers PNG transparents par défaut. Vous devez utiliser un petit hack pour obtenir des fichiers png transparents.

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

Answer 5

Vous ne pouvez pas ajouter le support pour translucidité PNG à l'aide IE6 CSS. Il existe des hacks (dont certains impliquent, IIRC, appelant des éléments ActiveX dans une feuille de style) et Google will find lots for you.

(De nos jours, cependant, je noterais que IE6 est juste à quelques semaines de fin de vie, a une petite part de marché parmi mon public cible, et refuse de faire le travail supplémentaire pour le persuader d'être beau)

Answer 6

je dû faire face à des problèmes IE6 PNG avant et cela a fonctionné ..

ce que vous faites est d'ajouter un attribut « comportement » à votre

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

et vous pouvez télécharger le fichier - iepngfix.htc here et vérifiez le online demonstration. il explique tout étape par étape