颜色“透明”不起作用答案

【问题标题】：Color "transparent" not working颜色“透明”不起作用
【发布时间】：2011-02-16 22:12:11
【问题描述】：

我的 IE 有问题（还有什么问题？）：

我使用具有背景图像的 CSS 生成内容。我看起来是这样的：

#nav ul li:after {
    content: "--";
    position: relative;
    z-index: 99;
    background: transparent url(image.png);
    color: transparent;
}

文本颜色在非 IE 浏览器中是透明的，但在所有 IE 浏览器 (IE6-IE8) 中是黑色的，您可以看到它。如何使文本透明/不可见？

我已经尝试过：可见性 - 不透明度 - 过滤器 - 文本缩进 ... 但是没有一个人做对了，要么它消失了（我需要它的背景），要么属性不适用。

【问题讨论】：

【解决方案1】：

IE 始终不支持li:after。你说的是哪个IE？ IE6？ IE7？两者都有？

【讨论】：

【解决方案2】：

我看到您正在使用 PNG 作为背景图片。通常，如果您使用的是 IE 6，则可以修复 PNG 透明度 (http://www.twinhelix.com/css/iepngfix/)。即便如此，这也不适用于背景图像。因此，如果您使用的是 IE 6，则确实没有修复方法。

【讨论】：

如果我理解正确的话，他说的是color: transparent 不起作用，而不是背景。
@Pekka：是的，我也是这么想的，但是如果你想让BG是透明的，为什么还要在背景上放一张图片呢？为什么还要将“颜色”属性设置为透明？这是没有意义的。无论如何，容器默认情况下都是透明的。这里有很多脱节。
我知道这是一个老问题，但它在哪里说 OP 使用的是透明 PNG？

【解决方案3】：

我认为没有任何版本的 IE 支持 color: transparent 也许你可以尝试用 jQuery 或类似的东西来做。

【讨论】：

【解决方案4】：

我明白了：使用正确的填充和零字体大小！将 padding-left 值设置为超出图像宽度一个像素。

【讨论】：

您可能希望更详细地扩展此答案。
我没有在线项目，但我发现这改变了 CSS：#nav li:after { content: "."; padding: 5px 0px 3px 0px; color: transparent; background: transparent url(bg-nav.png) no-repeat 0px 0px; position: relative; z-index: 1; }

【解决方案5】：

我假设你已经解决了这个问题，但最近我使用了非常大的行高，当 text-indent 给我带来布局问题时，结合溢出：隐藏来隐藏文本。

【讨论】：

【解决方案6】：

如何使用行高

line-height:0;

它在我的情况下有效。

【讨论】：

【解决方案7】：

如果您尝试将图像显示为背景而不显示文本，请使用

font-size:0px

有效！

【讨论】：

【解决方案8】：

如果这在 Internet Explorer 8 中不起作用

font-size: 0;

确保您使用的是有效的文档类型：

<!DOCTYPE html>

【讨论】：

【解决方案9】：

这应该可行。如果不加 display: block 或 inline-block

.transparent {
    text-indent: 100%;
    overflow: hidden;
    white-space: nowrap;
}

【讨论】：

【解决方案10】：

对我来说 color:transparent 在 IE8 中不起作用，它以默认颜色显示文本。我使用了可见性：隐藏；仅适用于 IE8，因为不需要显示文本。

如果不需要显示该元素，希望此帮助。

【讨论】：