如何使用 css 使在线 png <image> 透明？答案

【问题标题】：How to make inline png <img> transparent using css?如何使用 css 使在线 png <image> 透明？
【发布时间】：2010-05-21 23:43:48
【问题描述】：

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

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

<img src=transparent.png" />

</p>

</div>

这是图像例如。除了球我想让其他白色区域透明。在 IE6 中看起来是灰色的

我想在 css 中做这样的div#report img {.....} 可以吗？

编辑：

我不想让整个图像透明

更新：

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

【问题讨论】：

IE6 PNG transparency的可能重复
Is there any PNG-fix for IE 6 and without modifying current HTML, CSS and image name?的可能重复
这与“metal-gear-solid”之前提出的至少 2 个问题重复...
@DisgruntledGoat - 你发现什么重复？再次阅读这两个问题的标题

【解决方案1】：

默认情况下，IE 6 不支持透明 png 文件。您需要使用一个小技巧来实现透明的 png 文件。

【讨论】：

【解决方案2】：

试试这个：

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

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

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

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

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

【讨论】：

【解决方案5】：

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

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

【讨论】：

【解决方案6】：

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

你所做的就是为你的

添加一个“行为”属性

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

您可以下载文件 - iepngfix.htc here 并检查 online demonstration .. 它逐步解释了一切

【讨论】：