Несколько 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

Синтаксис background в фонах CSS3: [ <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'>

, тогда как <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-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-color затем 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.* Отредактировано , чтобы отметить, что это действительно сводится к порядку;как окончательно ответил в @ Борис ответ .

Answer 5

Должно быть background: rgba(255,0,0,0.2) url("static/menubg.jpg"); без ,

Answer 6

Исходя из хорошего решения Оскара (спасибо!), Вот как я реализовал его, используя 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 (из-заградиент).Тогда я вспомнил удивительный компас rgbapng Ruby gem для генерации PNG: https://github.com/aaronrussell/compass-rgbapng

@include background( png_base64( rgba(255, 66, 78, 0.25) ), image-url('/img/cardboard_flat.png') );

Теперь, это поддерживает IE9 + и остальные браузеры, которые поддерживают несколько фонов.

Если вы по-прежнемуЕсли вам нужна поддержка IE8, вы можете использовать многофоновый многогранник или стилизовать псевдоэлемент :: 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;
  }
}