如何使内联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
如何使内联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
默认情况下,IE 6 不支持透明 png 文件。您需要使用一个小技巧来实现透明的 png 文件。
http://support.microsoft.com/?scid=kb%3Ben-us%3B294714&x=12&y=11
尝试这个:
div#report img{
background-color/**/: #000000;
background-image/**/: none;
opacity: 0.7;
filter: alpha(opacity=70);
}
opacity属性适用于所有元素(在支持的浏览器中)。
我不确定我是否理解,但您可以使图像完全透明(即不可见):
div#report img { visibility: hidden } // Still takes up space
div#report img { display: none } // Hidden entirely -
但是,不可能仅将其应用于 png 图像,至少在 CSS 2.1 中是不可能的。.png
通过使用在src
属性中检查的选择器,肯定可以使用一些额外的 jQuery 魔法。
您不能使用 CSS 向 IE6 添加对 PNG 半透明的支持。有一些技巧(其中一些涉及 IIRC,将 ActiveX 内容调用到样式表中),Google 会为您找到很多。
(然而,这些天来,我注意到 IE6 距离生命终结只有几周的时间,在我的目标受众中占有很小的市场份额,并且拒绝做额外的工作来说服它看起来不错)