透明的 div 背景，带有一点颜色？答案

【问题标题】：Transparent div background, with a tint of color?透明的 div 背景，带有一点颜色？
【发布时间】：2010-04-07 18:03:27
【问题描述】：

谁能告诉我如何使 div 的背景透明，但带有一点颜色，例如黑色。尽管我只能让 div 透明或填充颜色，但我已经尝试过使用 CSS。
感谢您的帮助！

【问题讨论】：

【解决方案1】：

还有一个选项（尽管并非所有浏览器都支持）。使用 rgba()：

/* apply a shade of seafoam green (50% transparent) to "tinted" class */
.tinted {    
    background-color: rgba(129,254,188,0.5);
}

这里有一个不错的easy to read article，介绍了一些方法。

如果您不关心 IE6，事情会容易得多。

【讨论】：

【解决方案2】：

根据 Pekka 的回答，有opacity，但它会使 div 的内容和背景一样透明。如果这不是您想要的，您可以：

有两个 div，一个以不透明度/alpha 作为背景，另一个用于放置在其顶部的内容。然而，对于可变大小的元素，定位可能很棘手。或者，
使用半透明背景，通过使用 rgba() colour（在 IE 以外的浏览器中）或带有 alpha 通道的 PNG 背景图像（在 IE7-8 中有效，但需要 AlphaImageLoader修复了 IE6，这也意味着您必须将图像尽可能大，因为 AlphaImageLoader 不会平铺）。

【讨论】：

【解决方案3】：

您可以为此使用opacity（及其 IE 兄弟alpha）。

Quirksmode.org 列出了如何在大多数浏览器中始终如一地实现这一目标。

【讨论】：

如果您希望仅为背景着色，这不是一个很好的解决方案，但它会起作用。
@Atomiton 是真的。考虑到@bobince 的 cmets，我有点过度阅读了那部分 - 在动态大小的元素中为背景着色，PNG 绝对是要走的路。 rgba 还为时过早，因为没有 IE 支持它——否则，这将是最优雅的方式。

【解决方案4】：

或者您可以使用 PNG 半透明图像。通常是最简单的方法，因为在使用 opacity 时，您还会更改文本的不透明度。

【讨论】：

好点。唯一需要注意的是，半透明 PNG 需要 IE6 中的解决方法才能工作。还有一句警告，切勿将半透明 PNG 与 opacity 结合使用，它在所有 IE 浏览器（包括 8）中都会起作用。使用一种方法或另一种方法，但切勿将两者结合在一个元素中。
确保在使用前使用像 PNGOutWin (ardfry.com/pngoutwin) 这样的程序来压缩图像，这样就不会占用所有带宽。
既然可以使用真正的 css 半透明背景，为什么还要麻烦呢？
这已经快 4 岁了，这就是原因

【解决方案5】：

【讨论】：

【解决方案6】：

我时不时地遇到这个问题，所以我决定写一些能让生活更轻松的东西。该脚本小于 2kb，只需要 1 行代码即可运行，如果您愿意，它还可以处理背景不透明度的动画。

【讨论】：