如何制作内联png 使用CSS透明？

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 中是不可能的。通过使用检查 src 属性中的 .png 的选择器，当然可以使用一些额外的 jQuery 魔法。

Answer 5

您无法使用 CSS 将对 PNG 半透明的支持添加到 IE6。有一些 hack（其中一些涉及 IIRC，将 ActiveX 内容调用到样式表中）和 Google 会为您找到很多东西。

（然而，现在我注意到 IE6 距离生命周期结束只有几周的时间，在我的目标受众中占有很小的市场份额，并且拒绝做额外的工作来说服它看起来不错）

Answer 6

我之前必须处理 IE6 PNG 问题，这很有效。

你要做的就是向你的文件添加一个“行为”属性

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

，你可以下载该文件 - iepngfix.htc 此处 并检查 在线演示 ..它一步一步解释了一切