多个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

backgroundCSS3背景中的语法是[ <bg-layer> , ]* <final-bg-layer>零,或者更多<bg-layer>s,然后是单个<final-bg-layer>,用逗号分隔.见http://www.w3.org/TR/css3-background/#the-background

A <final-bg-layer>定义为:

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

而a <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有一些错误.我修好了.