Múltiples fondos de CSS, color sobre imagen, ignorado

Question

¿Qué pasa con esta línea de fondo de CSS múltiple. Firefox 4 lo ignora (como lo hace cuando hay un error de sintaxis).

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

Answer 1

La sintaxis para background en Fondos CSS3 es [ <bg-layer> , ]* <final-bg-layer>, lo que significa cero o más <bg-layer>s y luego una sola <final-bg-layer>, separados unos de otros por comas. Ver http://www.w3.org/TR/css3-background/#the-background

A <final-bg-layer> se define como:

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

mientras que un <bg-layer> es:

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

(ambas definiciones en http://www.w3.org/TR/css3-background/#ltbg-layergt).

O en términos simples, solo la capa de fondo más baja puede incluir un color de fondo. Entonces, sí, su CSS es, de hecho, un error de sintaxis.

Oh, y parece que https://developer.mozilla.org/en/css/multiple_backgrounds cometió algunos errores. Los he arreglado

Answer 2

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

Answer 3

Curiosamente, parece que bajar a la orden de los parámetros; la imagen de fondo continuación 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 demo), background-color continuación Imagen de fondo, mientras que:

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

NO (JS Fiddle).

Lo anterior probado en Chromium 11 y Firefox 4, ambos en Ubuntu 11.04.

---

Editado tener en cuenta que esto, de hecho, se reducen a la orden; como definitivamente respondida en @Boris' answer.

Answer 4

Debe tener en cuenta que, dado que los degradados se tratan como imágenes, es aceptable y funciona para colocarse en un degradado que tenga el mismo color superior e inferior.

Answer 5

Las soluciones se utilizan:

{-moz-linear-gradient(top, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.5) 100%), url(bg.png) repeat 0 0;} 

en lugar de: (gracias)

rgba(0, 0, 0, 0.5) 

Answer 6

ir fuera de la buena solución de Oscar, aquí es cómo he implementado usando SASS/Brújula para automatizar navegador prefijo

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

Esto es compatible con Webkit, Firefox, pero no con IE9 (debido a la gradiente).Entonces recordé la brújula rgbapng Rubí joya impresionante para la generación de archivos PNG: https://github.com/aaronrussell/compass-rgbapng

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

Ahora bien, esto es compatible con IE9 + y el resto de los navegadores que soportan múltiples orígenes.

Si aún necesita ayuda IE8, se podría utilizar un polyfill múltiples antecedentes, o estilo de un elemento seudo :: después y absolutamente posicionarlo, con un índice z de -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; 
    } 
}