这个多背景 CSS 行有什么问题。 Firefox 4 会忽略它（就像出现语法错误时一样）。
background: rgba(255,0,0,0.2), url("static/menubg.jpg");
【问题讨论】：
background-size 来缩放图像，但我删除了它并在发布之前对其进行了测试。
标签： firefox css background-color
放弃 Oscar 的好解决方案（谢谢！），这是我使用 SASS/Compass 实现浏览器前缀自动化的方法
@include background( linear-gradient( color-stops(rgba(255, 66, 78, 0.25), rgba(255, 66, 78, 0.25)) ), image-url('/img/cardboard_flat.png') );
这支持 Webkit、Firefox，但不支持 IE9（因为渐变）。然后我想起了用于生成 PNG 的 compass rgbapng Ruby gem：https://github.com/aaronrussell/compass-rgbapng
@include background( png_base64( rgba(255, 66, 78, 0.25) ), image-url('/img/cardboard_flat.png') );
现在，它支持 IE9+ 和其他支持多背景的浏览器。
如果您仍然需要 IE8 支持，您可以使用多背景 polyfill，或者设置 ::after 伪元素的样式并绝对定位它，z-index 为 -1：
html {
height: 100%;
}
body {
background: url('/img/cardboard_flat.png');
position: relative;
padding: 1px 0;
min-height: 100%;
&:after {
content: "";
position: absolute;
background: png_base64( rgba(255, 66, 78, 0.25) );
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: -1;
}
}
【讨论】：
解决方案正在使用：
{-moz-linear-gradient(top, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.5) 100%), url(bg.png) repeat 0 0;}
代替：
rgba(0, 0, 0, 0.5)
【讨论】：
您应该注意，由于渐变被视为图像，因此它是可以接受的，并且可以放入具有相同顶部和底部颜色的渐变。
【讨论】：
奇怪的是，它似乎归结为参数的顺序；背景图像 然后 背景颜色：
background: url('http://davidrhysthomas.co.uk/linked/astrid_avatar.png') no-repeat 50% 50%, rgba(255,180,0,0.8);
有效 (JS Fiddle demo)，而 background-color then background-image:
background: rgba(255,180,0,0.8), url('http://davidrhysthomas.co.uk/linked/astrid_avatar.png') no-repeat 50% 50%;
没有 (JS Fiddle)。
以上测试在 Chromium 11 和 Firefox 4 上测试，都在 Ubuntu 11.04 上。
【讨论】：
CSS3 背景中background 的语法是[ <bg-layer> , ]* <final-bg-layer>，表示零个或多个<bg-layer>s，然后是一个<final-bg-layer>，以逗号分隔。见http://www.w3.org/TR/css3-background/#the-background
<final-bg-layer> 定义为：
<final-bg-layer> = <bg-image> || <bg-position> [ / <bg-size> ]? ||
<repeat-style> || <attachment> || <box>{1,2} ||
<'background-color'>
而<bg-layer> 是：
<bg-layer> = <bg-image> || <bg-position> [ / <bg-size> ]? ||
<repeat-style> || <attachment> || <box>{1,2}
（http://www.w3.org/TR/css3-background/#ltbg-layergt 的两个定义）。
或者简单来说，只有最低的背景层可以包含背景颜色。所以是的，你的 CSS 实际上是一个语法错误。
哦，看起来https://developer.mozilla.org/en/css/multiple_backgrounds 有一些错误。我已经修好了。
【讨论】：
应该是background: rgba(255,0,0,0.2) url("static/menubg.jpg"); 没有,
【讨论】：