Capa de color semitransparente sobre la imagen de fondo?

Sé que este es un hilo muy antiguo, pero aparece en la parte superior de Google, así que aquí hay otra opción.

Este es CSS puro, y no requiere ningún HTML adicional.

box-shadow: inset 0 0 0 1000px rgba(0,0,0,.2);

Hay un sorprendente número de usos para la función box-shadow.

De CSS-Tricks... hay una forma de un paso para hacer esto sin z-indexación y la adición de pseudo elementos requires requiere gradiente lineal que creo que significa que necesita soporte CSS3

.tinted-image {
  background-image: 
    /* top, transparent red */
    linear-gradient(
      rgba(255, 0, 0, 0.45), 
      rgba(255, 0, 0, 0.45)
    ),
    /* your image */
    url(image.jpg);
}

También puede utilizar un degradado lineal y una imagen: http://codepen.io/anon/pen/RPweox

.background{
  background: linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,.5)),
    url('http://www.imageurl.com');
}

Esto se debe a que la función gradiente lineal crea una Imagen que se agrega a la pila de fondo. https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient

Necesita entonces un elemento de envoltura con la imagen bg y en él el elemento de contenido con el color bg:

<div id="Wrapper">
  <div id="Content">
    <!-- content here -->
  </div>
</div>

Y el css:

#Wrapper{
    background:url(../img/bg/diagonalnoise.png); 
    width:300px; 
    height:300px;
}

#Content{
    background-color:rgba(248,247,216,0.7); 
    width:100%; 
    height:100%;
}

Prueba esto. Funciona para mí.

.background {
    background-image: url(images/images.jpg);
    display: block;
    position: relative;
}

.background::after {
    content: "";
    background: rgba(45, 88, 35, 0.7);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}

.background > * {
    z-index: 10;
}

He utilizado esto como una forma de aplicar tintes de color, así como degradados a las imágenes para hacer que el texto de superposición dinámica sea más fácil de estilo para la legibilidad cuando no se puede controlar los perfiles de color de la imagen. No tienes que preocuparte por z-index.

HTML

<div class="background-image"></div>

SASS

.background-image {
  background: url('../img/bg/diagonalnoise.png') repeat;
  &:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(248, 247, 216, 0.7);
  }
}

CSS

.background-image {
  background: url('../img/bg/diagonalnoise.png') repeat;
}

.background-image:before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background: rgba(248, 247, 216, 0.7);
  }

Espero que ayude

Ver mi respuesta en https://stackoverflow.com/a/18471979/193494 para una visión general de las posibles soluciones:

1. usando múltiples fondos con un gradiente lineal,
2. múltiples fondos con un PNG generado, o
3. styling an :después de pseudoelement para actuar como una capa de fondo secundaria.

¿Por qué tan complicado? Su solución fue casi correcta, excepto que es una manera más fácil de hacer el patrón transparente y el color de fondo sólido. PNG puede contener transparencias. Por lo tanto, use photoshop para hacer el patrón transparente configurando la capa al 70% y volviendo a guardar la imagen. Entonces solo necesita un selector. Funciona cross browser.

CSS:

.background {
   background: url('../img/bg/diagonalnoise.png');/* transparent png image*/
   background-color: rgb(248, 247, 216);
}

HTML:

<div class="background">
   ...
</div> 

Puede usar un píxel semitransparente, que puede generar por ejemplo aquí , incluso en base64 Aquí hay un ejemplo con blanco 50%:

background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8Xw8AAoMBgDTD2qgAAAAASUVORK5CYII=),
url(../img/leftpanel/intro1.png);
background-size: cover, cover;

• Sin cargar

• Sin html adicional

• Supongo que la carga debería ser más rápida que la sombra de caja o el gradiente lineal

Aquí hay un truco más simple con solo css.

<div class="background"> </div>
    <style>
    .background {
      position:relative;
      height:50px;
      background-color: rgba(248, 247, 216, 0.7);
      background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAJElEQVQYV2NctWrVfwYkEBYWxojMZ6SDAmT7QGx0K1EcRBsFAADeG/3M/HteAAAAAElFTkSuQmCC); 
    }

    .background:after {
        content:" ";
        background-color:inherit;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%; 
    }

    </style>