多个CSS背景，图像上的颜色，被忽略

Question

这个多背景 CSS 行有什么问题吗？ Firefox 4 会忽略它（就像出现语法错误时一样）。

background: rgba(255,0,0,0.2), url("static/menubg.jpg");

Answer 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)

Answer 2

CSS3 背景中 background 的语法为 [; , ]*，这意味着零个或多个 ，然后是单个 。，彼此之间用逗号分隔。请参阅​​http://www.w3.org/TR/css3-background/#the-background

定义为：

<final-bg-layer> = <bg-image> || <bg-position> [ / <bg-size> ]? || 
                   <repeat-style> || <attachment> || <box>{1,2} ||
                   <'background-color'>

而 为：（

 <bg-layer> = <bg-image> || <bg-position> [ / <bg-size> ]? ||
              <repeat-style> || <attachment> || <box>{1,2}

处的两个定义href="http://www.w3.org/TR/css3-background/#ltbg-layergt">http://www.w3.org/TR/css3-background/#ltbg-layergt ) 。

或者简单来说，只有最低的背景层可以包含背景颜色。所以是的，你的 CSS 实际上是一个语法错误。

哦，看起来 https://developer.mozilla.org/en/css/multiple_backgrounds 有一些错误它。我已经修好了它们。

Answer 3

您应该注意，由于渐变被视为图像，因此可以接受并且可以放入具有相同顶部和底部颜色的渐变。

Answer 4

它应该是 background: rgba(255,0,0,0.2) url("static/menubg.jpg"); ，不带 ,

Answer 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: 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 上进行。

---

Edited to note that this does, indeed, come down to the order; as definitively answered in @Boris' answer.

Answer 6

离开 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 的很棒的指南针 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;
  }
}