如果您经常使用 CSS 透明度，您就会知道关于它的最令人沮丧的事情之一是，通过在任何页面元素上设置它，它也会强制其子元素透明。 我很乐意听到对这个错误的技术解释！ 有些 解决方法，但它们涉及精密的定位技巧，不适合大规模使用。
透明度最常见和最简单的用途之一是 div 上的透明填充。 这是一个非常理想且美观的效果。 例如，如果您像我喜欢的那样使用纹理背景，您可以使用此效果突出显示文本框
在理想情况下，我们只需要为容器 div 设置一个 background-color 和 opacity 值即可实现这一点。 但如果我们这样做，文本也将呈现这种透明度，并变得难以阅读。
解决方案是使用 alpha 透明 PNG 填充 div 的背景。 以下是我使用的一些标准“填充”
 黑色 90% |
 黑色 75% |
 黑色 50% |
 黑色 25% |
 黑色 10% |
 棕色 90% |
 棕色 75% |
 棕色 50% |
 棕色 25% |
 棕色 10% |
 蓝色 90% |
 蓝色 75% |
 蓝色 50% |
 蓝色 25% |
 蓝色 10% |
 红色 90% |
 红色 75% |
 红色 50% |
 红色 25% |
 红色 10% |
 橙色 90% |
 橙色 75% |
 橙色 50% |
 橙色 25% |
 橙色 10% |
IE 6 怎么办？
众所周知 IE 6 不支持 alpha 透明度，对吧？ 对。 有一些解决方法。 我最喜欢的方法是 HTC 文件方法。 它不是有效的 CSS，但您始终可以将其放入 仅限 IE 的样式表 中。 在上面链接的演示中，我已经应用了该技巧，但它故意被破坏了，因此您可以看到 IE 6 如何处理它。 如果您使用此技巧，它将无法重复或定位背景图像。 没什么大不了的，只需使填充图形的大小与您需要的大小完全匹配即可。 由于它是一种平面颜色，因此文件大小不会大很多。 作为快速说明，众所周知此方法会偶尔弄乱锚链接，因此我担心在没有大量测试的情况下在大型网站上使用它。
我不记得 HTC 修复方法（因为我通常使用 Dean Edwards IE7.js 来修复我的 IE6 并手动修复我用作背景图像的任何透明 PNG），但如果它只是使用 DXImage 过滤器的另一种方法，则 IE6 中的链接问题通常可以通过显式设置为 position: relative 来解决。
这是一个很棒的技巧。 做得好。
我不太理解为什么人们觉得这很难理解：CSS 继承的寿命，XML 及其所有后代或多或少都是基于这种分层系统——那么为什么透明度不不应由子元素继承？ 如果属性不被继承，我们的生活会更加艰难。 想象一下，如果你必须为页面上的每个元素设置文本颜色或大小……
话虽如此，但还是要感谢您对网站付出的巨大努力！
—trice
并非每个属性都必须传递给它的子元素。 想象一下，如果“宽度”被继承……那就太蠢了。 这属于同一类别。 透明度级联没有意义。 很有可能，你不想要它。
感谢您的回复！ 如果您想准确地说，宽度实际上是某种程度上继承的。 一个相对定位的块级元素，放置在另一个块级元素中，将“继承”父元素的宽度，这意味着它不会更宽，对吧？ 而且，如果您将块级元素视为方框，这种方法似乎合乎逻辑（这可能只是我个人的想法），而且我不希望它以任何不同的方式反应。
顺便说一下，CSS 不是唯一以这种方式工作的技术——Flash 中的 movieclips 对于某些属性的工作方式非常相似。 这似乎是“最少阻力”的途径。
我实际上完全同意您关于透明度在实际使用中存在的一些问题——它有时会使事情变得更加复杂。 但想象一下，如果您使用的是例如 jQuery 的 fadeOut()，它利用透明度属性来淡出页面上的元素，出于显而易见的原因，您不希望将该方法应用于该元素的所有子元素。 因为如果您希望透明度按您的意愿工作，您就必须这样做。
问候，
—trice
是的，宽度是一个非常糟糕的例子 =)，因为很明显块的块级子元素确实继承了宽度。 边框可能是一个更好的例子，在那里您不希望所有子元素都具有边框，仅仅因为父元素具有边框。
我认为您提出了一点非常好的观点，支持透明度级联，将父元素的透明度设置为零，如果所有子元素也变得不可见，这是最有意义的。 我认为 jQuery 会足够智能，无论 CSS 规范如何都会实现这一点，但这确实使事情变得更容易。
我认为“错误”是，您无法摆脱它。 如果你将父元素的透明度设置为 0.4，而子元素继承了它，这很好，只要您能够在需要时将子元素向上调整。
这是真的。 在这些情况下，我希望有更多的访问权限。——也许 CSS4 就可以。 那是什么时候准备好的？ 3034 年还是什么时候？ :D
祝您今天愉快，
—trice
我在几个最近的网站中使用的一种方法是 超级幻影。 只需将链接插入 supersleight javascript 文件，然后像往常一样设计您的网站，所有 png 都将具有透明度。 任何定位都有效。 不再需要拉伸图像或为了 IE 而进行黑客攻击和重新定位。
唯一的问题是，当 IE6 首次加载时，在具有透明区域的区域中可能会有一点“灰色”闪烁。 它很快，几乎不可察觉。
“我最喜欢的方法是 HTC 文件方法”我也是。 它运行良好。 但我没有这些图像。 感谢您的分享。
只需注意，如果您用 filter:alpha（所有方法都执行此操作）替换了太多 PNG，IE6 会崩溃。
如果您使用任何 javascript 库（我使用了 mootools 和 jquery——它们都将执行内联样式和样式表转换），则有许多脚本可用。
我期待着它何时可以被放弃作为支持的浏览器，在我工作的那一行，这可能永远不会发生。
如果您使用带有 alpha 颜色的纯图像（而不是图案，或者类似的东西），即使对于 IE，您也可以使用 1 像素图像
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='grey.png', sizingMethod='scale');
Scale 表示“将 grey.png 缩放以适应块边界”。
pepelsbey，非常感谢您告知。 我想如果您使用 HTC 方法，您必须进入并修改该文件。 不确定，我还没有深入研究它，看看是否有内置的方法来处理某些图像缩放而另一些图像不缩放。