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

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

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

已邀请:

6 个回复

氏脑

CSS3 Backgrounds中background的语法为[ <bg-layer> , ]* <final-bg-layer>，表示零个或多个<bg-layer>s，然后是单个single4ѭ，以逗号分隔。参见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中有一些错误。我已经修复了。

钨蜡唤喉晤

解决方案正在使用：

{-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: rgba(255,0,0,0.2) url(\"static/menubg.jpg\");，而不是,

拟蓬

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

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

Works（JS Fiddle演示），而背景色然后是背景图片：

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

不（JS小提琴）。上面的代码在Chromium 11和Firefox 4上都在Ubuntu 11.04上进行了测试。编辑以注意，这确实归结为命令；如@鲍里斯的答案中明确回答的那样。

绵扇寸访

不使用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索引为-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 个回复

发起人

firefox

css3

background_color

css

问题状态

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

与内容相关的链接

6 个回复

发起人

firefox

css3

background_color

css

问题状态