颜色“透明”不起作用
Posted
技术标签:
【中文标题】颜色“透明”不起作用【英文标题】：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) 中是黑色的，您可以看到它。 如何使文本透明/不可见？
我已经尝试过：可见性 - 不透明度 - 过滤器 - 文本缩进 ... 但是没有一个人做对了，要么它消失了（我需要它的背景），要么属性不适用。
【问题讨论】：
哪个IE版本？澄清一下，有一个黑色的--，这就是你不想要的，对吧？不是整个东西都有黑色背景吗？
【参考方案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
有效！
【讨论】：
只是想感谢您的简单回答。试图隐藏不需要访问底层代码的按钮的值，这很有效。 天哪，这只是阻止我将笔记本电脑扔出窗外。谢谢=] 这会导致可访问性问题，并在某些较旧的浏览器上显示一小行文本。有关更多信息，请参阅 CSS 技巧图像替换库。【参考方案8】：如果这在 Internet Explorer 8 中不起作用
font-size: 0;
确保您使用的是有效的文档类型：
<!DOCTYPE html>
【讨论】：
【参考方案9】：这应该可行。如果不加 display: block 或 inline-block
.transparent
text-indent: 100%;
overflow: hidden;
white-space: nowrap;
【讨论】：
我已将正文溢出设置为自动。这导致了渲染颜色的问题：chrome 中角度组件的透明。让它再次可见（默认溢出设置）解决了这个问题。【参考方案10】：对我来说 color:transparent 在 IE8 中不起作用，它以默认颜色显示文本。我使用了可见性：隐藏；仅适用于 IE8，因为不需要显示文本。
如果不需要显示该元素，希望此帮助。
【讨论】：
以上是关于颜色“透明”不起作用的主要内容，如果未能解决你的问题，请参考以下文章