CSS 颜色“透明”不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2790181/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Color "transparent" not working
提问by Poru
I have a problem with the IE (what else?):
我的 IE 有问题（还有什么问题？）：
I generate content with CSS which has also a background-image. I looks like that:
我用 CSS 生成内容，它也有一个背景图像。我看起来像这样：
#nav ul li:after {
content: "--";
position: relative;
z-index: 99;
background: transparent url(image.png);
color: transparent;
}
The text color is in non-IE-browsers transparent, but in all IE browsers (IE6-IE8) it's black and you could see it. How could I make the text transparent/unvisible?
文本颜色在非 IE 浏览器中是透明的，但在所有 IE 浏览器 (IE6-IE8) 中它是黑色的，您可以看到它。如何使文本透明/不可见？
I tried already: visibility - opacity - filter - text-indent ... But none did his job right, either it disappears (with it background which I need) or the attribute doesn't apply.
我已经尝试过：可见性 - 不透明度 - 过滤器 - 文本缩进......但没有人做对了，要么消失（带有我需要的背景），要么属性不适用。
采纳答案by Poru
I get it: With the correct padding and a zero font-size! Set the padding-left value to be one pixel beyond the image width.
我明白了：使用正确的填充和零字体大小！将 padding-left 值设置为超出图像宽度一个像素。
回答by Juan
if what you're trying to do is show the image as background and not showing the text use
如果您要做的是将图像显示为背景而不显示文本，请使用
font-size:0px
font-size:0px
it works!
有用！
回答by Arsenal Fanatic
what about using line-height
使用 line-height 怎么样
line-height:0;
line-height:0;
it worked in my case.
它在我的情况下有效。
回答by Sarah-Jane
If this doesn't work in Internet Explorer 8
如果这在 Internet Explorer 8 中不起作用
font-size: 0;
make sure you're using a valid doctype:
确保您使用的是有效的文档类型：
<!DOCTYPE html>
回答by tbela99
This should work. If it doesn't add display: block or inline-block
这应该有效。如果不添加 display: block 或 inline-block
.transparent {
text-indent: 100%;
overflow: hidden;
white-space: nowrap;
}
回答by Mario Estrada
I assume you already fixed this, but lately i've used a very large line-height, when text-indent is giving me layout problems, combined with overflow: hidden to hide the text.
我假设你已经解决了这个问题，但最近我使用了一个非常大的行高，当 text-indent 给我布局问题时，结合 overflow: hidden 隐藏文本。
回答by Venemo
I think no versions of IE support color: transparentPerhaps you could try to do it with jQuery or something like that.
我认为没有版本的 IE 支持color: transparent也许你可以尝试用 jQuery 或类似的东西来做。
回答by Armstrongest
IE doesn't support li:afterconsistently. Which IE are you talking about? IE6? IE7? Both?
IE 不支持li:after一致。你说的是哪个IE？IE6？IE7？两个都？
回答by pravin deshmukh
For me color:transparent was not working in IE8, and it was showing text with default color. I used visibility:hidden; for IE8 only as the text was not required to display.
对我来说 color:transparent 在 IE8 中不起作用，它以默认颜色显示文本。我使用了可见性：隐藏；仅适用于 IE8，因为不需要显示文本。
Hope this help in case, if the element is not required to display.
如果不需要显示元素，希望这有助于万一。
回答by Robusto
I see you're using a PNG as your background image. Normally, if you're using IE 6, there is a fix for PNG transparency (http://www.twinhelix.com/css/iepngfix/). Even so, this will not work with background-images. So if you're using IE 6, there really isn't a fix.
我看到您使用 PNG 作为背景图片。通常，如果您使用的是 IE 6，PNG 透明度有一个修复程序（http://www.twinhelix.com/css/iepngfix/）。即便如此，这也不适用于背景图像。因此，如果您使用的是 IE 6，则确实没有修复方法。
