javascript - 如何使用css使内联png透明？

Question

如何使内联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

score 2 · Accepted Answer

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

score 1 · Accepted Answer

尝试这个：

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

score 0 · Accepted Answer

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

您所做的是向您的

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

您可以在此处下载文件-iepngfix.htc并查看在线演示.. 它逐步解释了所有内容

score 0 · Accepted Answer

0

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

于 2010-05-21T12:12:49.073 回答

score 0 · Accepted Answer

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

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

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

score 0 · Accepted Answer

您不能使用 CSS 向 IE6 添加对 PNG 半透明的支持。有一些技巧（其中一些涉及 IIRC，将 ActiveX 内容调用到样式表中），Google 会为您找到很多。

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

6 回答 6