CSS 中的 `background` 属性可以接受以逗号分隔的值。“多个”背景，如果你愿意。你也可以将它们视为分层背景，因为 它们具有堆叠顺序。如果我们在图像上叠加一种透明颜色，我们可以“着色”该图像。但这并不像你想象的那样简单。
我最初直观的猜测是这样做的
/* Warning: this doesn't work */
.tinted-image {
background:
/* top, transparent red */
rgba(255, 0, 0, 0.25),
/* bottom, image */
url(image.jpg);
}不幸的是，这无效。我不确定为什么。一段时间前，当我 在 Twitter 上抱怨此事 时，我得到了各种想法/原因/借口。没有一个对我来说完全正确。确实，你不能用逗号分隔 `background-color`，但我认为这与这里无关，因为我正在用逗号分隔 `background` 简写，而不是专门的 `background-color`（更不用说以相反的顺序排列这些值也可以正常工作）。
我怀疑真正的原因是，这样很容易导致作者出错。`background: green, url(image.jpg);` 从某种意义上来说会“失败”，因为它只会用绿色填充背景。强制颜色放在最后，使颜色有点像“备用方案”，而不是像其他任何层一样。
不幸的是，我们也不能简单地将颜色放在底部并调整图像的不透明度以使某些颜色透出来，因为 `background-opacity` 不是一个东西。（尽管你可以 伪造它。）
但是有一种方法！
与其使用 `rgba()` 或 `hsla()` 来使用透明填充颜色，我们可以使用渐变。渐变在技术上是 `background-image`，因此不受无法放在堆叠顺序第一位（顶部）的规则约束。
/* Working method */
.tinted-image {
background:
/* top, transparent red, faked with gradient */
linear-gradient(
rgba(255, 0, 0, 0.45),
rgba(255, 0, 0, 0.45)
),
/* bottom, image */
url(image.jpg);
}查看 CodePen 上 Chris Coyier 的示例 使用多个背景色为图像着色 (@chriscoyier)。
嘿，不管什么有效，对吧？
在我最近的一个 CodePen 示例中（获得了推荐，谢谢大家！），我做了一个技巧，使全页背景图像（使用你的之前的一篇文章）部分透明。这使我能够更改页面的背景颜色，并产生图像颜色变化的效果。我想这样做有点像上面你所做事情的反面。不过这是一个很酷的效果，我会记住它以备后用，谢谢 Chris。
这在大多数新浏览器中都有效，但是 IE 呢？
另外，这个怎么样？ http://codepen.io/NSDCars5/pen/nuzbI
从 IE9 开始，它就可以工作了。
对于 IE8 和更旧的版本，也许你可以使用旧的 `filter` 属性做一些事情。
你 CodePen 示例中的那个技巧一直都有效，但它依赖于标记。你只是将元素一个接一个地叠加在一起。Chris 描述的技巧更加灵活，不需要更改标记。
使用伪元素来维护它不是更容易吗？这样它就与 `background-image` URL 无关。
像这样 – http://codepen.io/anon/pen/lbfeC
你知道，那个伪元素的东西，我需要研究一下。我听说过它，但从未使用过（我对所有这些 HTML+CSS 东西都很陌生）……。
@NSDCars5
我真的很建议你研究一下。它们可以帮助你实现一些非常棒的技巧，而无需用仅用于装饰目的的元素污染 HTML 标记。
一个很好的例子是“Niet the Dark Absol”在 http://stackoverflow.com/questions/14387690/css-show-only-corner-border 上的回答
这就是我所做的：使用伪元素在背景/图像的顶部添加过滤器。`position: absolute`，并将 `top`、`bottom`、`left`、`right` 全部设置为 0。然后我使用 `rgba` 应用颜色和透明度。
一开始这似乎是一个很好的解决方案，但当你实际在容器中添加任何内容时，它就会开始失效。关于如何使它更灵活的想法？
示例
@Andrew Richardson
糟糕，我的错。我忘记为容器添加 `position: relative`。
将 `position` 设置为 `relative`，并将伪元素的 `width/height` 设置为 100%。
@Andrew
我创建了一个新的 CodePen。
http://codepen.io/anon/pen/EClfq
啊，是的，这有道理。这可能是最通用的选项，因为你可以以任何你想要的方式操作叠加颜色，同时保留背景图像。谢谢！
有人可能会争辩说，使用伪元素进行装饰会降低 CSS 的可维护性。如果你在一个团队中工作，你需要添加注释。使用多个背景图像分层叠加更容易理解，都在一个地方，最终需要维护和/或破坏的 CSS 更少。记住，伪元素仍然在添加元素。只是浏览器正在创建它们。
多个背景似乎是更干净的解决方案。
从长远来看，代码越少，可维护性越高。
此方法也可以轻松调整以实现一些不错的悬停效果。
.red:after{
background:rgba(25,55,0,0.2);
transition: background 200ms ease-out;
}
:hover.red:after{
background:rgba(25,34,23,0.5);
}
使用伪元素当然很聪明，但完全无法访问。一旦你向元素添加内容（例如 Andrew Richardson 尝试的那样），你就无法选择它（除非你选择所有内容 - CTRL+A）。
尝试使用鼠标在你的演示中选择文本。.
同意 Armstrongest 的观点，多个背景只是一个更简洁的解决方案。
你最初的语法不起作用的原因是，你指定了一个 `background-color` 和一个 `background-image`，并且图像始终会叠加在颜色之上。通过使用相同的开始-结束停止值定义 `linear-gradient`，你实际上是在创建一个纯色块的图像，该图像可以绘制在背景图像之上。
我在我的 CSS 3D 演示 中使用了相同的技巧来伪造灯光。
我认为这不是准确的。
这与背景是图像还是颜色无关，而是 堆叠顺序。但是的，渐变技巧正是我在这里提出的。
确实如此：“如果存在背景颜色，则将其绘制在所有其他图层下方。”（w3c）。
我想知道渐变方法与使用所选框架生成半透明着色数据嵌入的 png 的比较结果。
通读 背景和边框模块，看起来 `background-color` 仅在它是简写声明中定义的最后一个属性时才有效。因此它只能作为底部的“图层”存在 - 我想这是为了使语法与 CSS2 保持一致，后者指出“当图像可用时，它会在背景颜色的顶部呈现”。
我认为你不能将 `background-color` 放置在顶部的理由是，实际上只有一个 `background-color` 图层，它始终在底部。换句话说，`background-color` 不是针对每个图层应用的，而是针对整个堆栈应用一次。
或者，在代码中：它不是“`background: layer1 color1, layer2 color2, layer3 color3;`”，而是“`background: layer1, layer2, layer3 color;`”。
遗憾的是，这在 CSS 过渡中不起作用 - 因为颜色会（如果支持的话）。
我想这算是对伪元素技巧的支持……但是……
这需要一个包装来调整伪元素的大小。
它也可能干扰文本选择……
类似这样：http://codepen.io/anon/pen/CcyaD
太棒了！如果线性渐变可以与过渡一起使用就好了……
你在想什么方案？
在某些情况下，线性渐变确实可以过渡……算是吧。请注意，它不会与下面的图像一起使用，但这里有一个演示如何实现该效果的示例。
http://codepen.io/garypaul/pen/iDcEx
这实际上比我想象的要酷，因为你可以使用渐变色调，而不仅仅是纯色。耶！
我唯一的问题是，我假设这可以与过渡一起使用？？？
因为线性渐变本质上是生成的图像，所以它们不会过渡。不过，您可以使用背景位置来实现某种效果。
这可以产生一些非常酷的效果
http://codepen.io/vobpler/full/aljwd
实际上非常酷，这就是我想到的。现在只需要弄清楚是否可以在它们上进行过渡。
这太棒了！
我尝试向其添加 transition-duration，但似乎不起作用。我认为不支持背景图像过渡，至少 Chrome 不支持。
不幸的是，渐变无法过渡。:(
不过，您可以过渡 background-position 以将一个渐变视觉地转换为另一个渐变：http://codepen.io/chriscoyier/pen/JgrhE
@Beecher、@Jon Wiedmann 和 @Farax
虽然您无法转换渐变的颜色，但您可以转换其 background-position，因此，如果您使渐变非常长（例如 2000% 高），则可以通过滚动渐变来模拟颜色转换效果。
以下是该效果的演示：http://codepen.io/keithclark/pen/trFch
谢谢，我想现在可以了。
嘿，Chris，我看到其他人也提到了这一点，但我立即想到的解决方案是使用伪元素。由于我们的团队必须支持 IE8，因此我一直避免使用多个背景（需要回退）无论如何。我只会将 img 标签包装在一个带类名的 span 或锚点中，并设置伪类的 z-index。
我以前使用过这个概念来创建有趣的投影：使用常规 box-shadow 创建一个伪元素，并在其上添加一个 transform rotation，将子元素（即 img）设置为更高的 z-index，这样您就可以得到一个优雅降级的倾斜投影。（IE8 不会显示投影）
嗨，Chris，
像往常一样，这是一个不错的技巧，只是指出您的 CSS 代码中关于不透明度存在一个小错误
0,45)应该是
0.45)在 Codepen 上完美
最好的问候！！！
谢谢 Cristian！已修复。隐藏原因不再相关。
我可以想象渐变层对图片库很有用，也许可以在悬停时将其移除以显示焦点。
在 iOS 上的 Chrome 上似乎不起作用。不过，我没有在 Safari 上测试过
但它不起作用…… - 在 Android 上
（4.1.1 Chrome 18.0 既不在原生浏览器中）
自己添加前缀。
我刚刚启用了 -prefix-free，因此也许这将有助于演示。
很棒的技巧。它完全避免了弄乱堆叠顺序，正如 Jesse（上文）指出的那样，对于像图像网格库这样的东西，它可以作为很棒的过滤器。
在 WebKit（MacOs）上不起作用
它在我的房间里也不起作用……
（我们至少应该知道 WebKit 版本号吗？）
不错，Chris！我之前做过类似的事情，尽管我的方法适用于“淡化”背景图像，而不是对其进行着色。理论上，可以使用过滤器来创建相同的效果。
还可以使用该技术的变体来在图像上创建“丝网印刷”视觉效果。
谢谢 Chris，我昨天一直在使用这个伪元素技巧……这个技巧确实帮助了我……
这可能是一个超载的问题，在这里不太合适。有谁知道如何使其与 SASS 一起使用吗？
当我将带逗号的属性放入我的 sass 文件时，它会将其分解并输出无效内容。
这是进入我的 sass 文件的内容
这是 Chrome 中输出的内容。Firefox 完全没有显示它，我猜是因为它无效并将其删除了。
我刚开始使用 SASS，所以也许我无法做到这一点，需要将其添加到我的 CSS 文件中。有谁知道吗？谢谢。
此外，忘记提到我正在使用**Hammer**进行 SASS 编译。不确定这是否会产生影响。
如果这个问题过于复杂而无法在此处发布，请不要担心。我只是想问问。
你只是想编译一个渐变，对吧？
该CSS 渐变生成器有一个选项可以输出到 SCSS，如果这有帮助的话。
啊，是的，这看起来可以解决我的问题。我没想到有一种专门用于渐变的 sass 方法。谢谢。
太棒了..这真是太神奇了。我将在未来的新项目中使用它。谢谢
http://www.thesoftwareguy.in
我碰巧在一段时间前的项目中使用了它，如果有人想看看它的用法。
包括一个巧妙的过渡到全色
使用 box-shadow 属性实现**相同的效果**
查看 Maxim Aginsky 的 Pen示例（@maximaginsky）在CodePen上
不错的解决方法。但是这在演示中似乎不起作用。至少对我来说是这样。
非常酷。谢谢
真的很酷！只是可惜并非所有浏览器都能和谐地做同样的事情。
实现**该效果**的另一种方法是使用 box-shadow 属性
CodePan 上的示例
唉，Safari 需要前缀……
我个人使用多背景方法，通常不使用 RGBA，而是创建 PNG。自从看到这篇文章后，我觉得我会改用这种方法，因为它简单得多。谢谢！
我需要为我的编辑识别没有 alt 标签的图片，所以我找到了这种与图片无关的技术。
if (!$(this).attr('alt') ){$(this).css('opacity','0.4').wrap('<div Style="background:red; width:'+$(this).width()+'px;color:#fff;font-weight:bold ">NO ALT TAG!!</div>');}我只是用一个 Div 包裹图片，调整宽度使其与图片相同，并添加颜色背景，使图片稍微透明一点。
这可以很容易地分配给一个类。
谢谢，干得不错…
我试图将它用于我的标题图片，但由于某种原因，当我使用 bourbon 时它不起作用。一旦我注释掉所有 bourbon、neat 和 bitters，图片就会显示出来并且渐变也会生效。
<
为什么？D: D
我已经找了几个小时了，这看起来很简单，但我却搞不定。非常感谢！