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

Posted 2023-02-21

【中文标题】多个 CSS 背景，图像上的颜色，被忽略

【英文标题】：Multiple CSS backgrounds, colour over image, ignored

【发布时间】：2011-08-16 15:12:33

【问题描述】：

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

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

【问题讨论】：

你的css中还有其他背景相关的标签吗？

@Arjan：我有一个 background-size 来缩放图像，但我删除了它并在发布之前对其进行了测试。

【参考方案1】：

放弃 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;
  

【参考方案2】：

解决方案正在使用：

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

【参考方案3】：

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

【参考方案4】：

奇怪的是，它似乎归结为参数的顺序；背景图像 然后 背景颜色：

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 上。

---

编辑

要注意，这确实归结为顺序；正如@Boris' answer 中明确回答的那样。

【参考方案5】：

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 有一些错误。我已经修好了。

【讨论】：

有一个很好的参考+1；我没想过要为我的答案寻找权威来源。

自从您进行更改后，该 MDC 页面上的“现场演示”似乎无法正常工作。

确实如此。为了更有趣，我所做的任何更改都不会影响到这一点，和恢复到工作修订版不起作用：wiki 声称文本现在与工作修订版相同，但是它产生的实际标记明显不同。我给 wiki 维护者发了邮件。我讨厌维基。 :(

嗯，所以如果我想为背景图像着色，是否需要在其上放置重复的 1x1 透明像素图像？真可惜，但是哦。

是的，在 CSS3 背景中并没有很好的支持。您可以使用 data: URI 作为 1x1 事物...

【参考方案6】：

应该是background: rgba(255,0,0,0.2) url("static/menubg.jpg"); 没有,

【讨论】：

当您使用带有颜色的背景图像作为后备时。我正在尝试多种背景：developer.mozilla.org/en/css/multiple_backgrounds