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的语法为[ <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有一些错误。我修好了他们。

Answer 3

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

Answer 4

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

，则应为,

Answer 5

奇怪的是它似乎归结为参数的顺序; background-image 然后 background-color：

background: url('http://davidrhysthomas.co.uk/linked/astrid_avatar.png') no-repeat 50% 50%, rgba(255,180,0,0.8);

作品（JS Fiddle demo），背景色然后 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上进行了测试。

<小时/> 已编辑注意到这确实归结为订单;正如@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;
  }
}

多个CSS背景，颜色超过图像，被忽略

6 个答案: