如何使用css使内联png <img/>透明？

Question

如何在div中使内联png透明？使用css

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

<img src=transparent.png" />

</p>

</div>

这是图像。除了球，我想制作透明的其他白色区域。这在IE6中看起来很灰白

我想用css这样做div#report img {.....}是否有可能？

编辑：

我不想让整个图片透明

更新

我在这里添加了示例http://jsbin.com/ubabo3

Answer 1

IE 6默认情况下不支持透明png文件。你需要使用一个小的黑客来实现透明的png文件。

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

Answer 2

试试这个：

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

Answer 3

opacity属性适用于所有元素（在支持的浏览器中）。

Answer 4

我不确定我理解，但你可以使图像完全透明（即不可见）：

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

但是，不可能将此仅应用于png图像，至少不能在CSS 2.1中应用。通过使用检查.png属性中的src的选择器，肯定可以使用一些额外的jQuery魔法。

Answer 5

您无法使用CSS向IE6添加对PNG半透明的支持。有一些黑客攻击（其中一些涉及IIRC，将ActiveX内容调用到样式表中）和Google will find lots for you。

（但是，现在我注意到IE6距离生命终结还有几个星期，在我的目标受众中占有很小的市场份额，拒绝做额外的工作来说服它看起来不错）

Answer 6

之前我不得不处理IE6 PNG问题，这很有效。

您要做的是为您的

添加“行为”属性

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

您可以下载文件 - iepngfix.htc here并查看online demonstration ..它会逐步解释所有内容