¿Capa de color semitransparente sobre imagen de fondo?

Tengo un DIV y me gustaría poner un patrón como fondo. Este patrón es gris. Entonces, para hacerlo un poco más agradable, me gustaría poner una "capa" de color transparente claro. A continuación se muestra lo que intenté pero que no funcionó. ¿Hay alguna manera de poner la capa de color sobre la imagen de fondo?

Aquí está mi CSS:

background: url('../img/bg/diagonalnoise.png');
background-color: rgba(248, 247, 216, 0.7);

Aquí está:

.background {
    background:url('../img/bg/diagonalnoise.png');
    position: relative;
}

.layer {
    background-color: rgba(248, 247, 216, 0.7);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

HTML para esto:

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

Por supuesto, debe definir un ancho y un alto para la .backgroundclase, si no hay otros elementos dentro de ella.

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 puro CSS y no requiere ningún HTML adicional.

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

Hay una sorprendente cantidad de usos para la función de sombra de cuadro.

De CSS-Tricks ... hay una forma de hacer esto en un solo paso sin indexar en z y agregar pseudo elementos: requiere un gradiente lineal, lo que creo que significa que necesita soporte para 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 usar 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 de gradiente lineal crea una imagen que se agrega a la pila de fondo. https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient

Prueba esto. Funciona para mi.

.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;
}

Necesita entonces un elemento de ajuste 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%;
}

Lo he usado como una forma de aplicar tintes de color y gradientes a las imágenes para que el texto de superposición dinámica sea más fácil de diseñar para la legibilidad cuando no puede controlar los perfiles de color de la imagen. No tiene que preocuparse por el índice z.

HTML

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

HABLAR CON DESCARO A

.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 eso ayude

Consulte mi respuesta en https://stackoverflow.com/a/18471979/193494 para obtener una descripción completa de las posibles soluciones:

1. usando múltiples fondos con un degradado lineal,
2. múltiples fondos con un PNG generado, o
3. Diseño de un: después del pseudoelemento para actuar como una capa de fondo secundaria.

¿Por qué tan complicado? Su solución fue casi correcta, excepto que es mucho más fácil hacer que el patrón sea transparente y que el color de fondo sea sólido . PNG puede contener transparencias. Entonces, use Photoshop para hacer que el patrón sea transparente al configurar la capa al 70% y volver a guardar su imagen. Entonces solo necesitas un selector. Funciona entre navegadores.

CSS:

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

HTML:

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

Esto es lo básico. Sigue un ejemplo de uso en el que cambié backgrounda, background-imagepero ambas propiedades funcionan igual.

body { margin: 0; }
div {
   height: 110px !important;
   padding: 1em;
   text-transform: uppercase;
   font-family: Arial, Helvetica, sans-serif;
   font-weight: 600;
   color: white;
   text-shadow: 0 0 2px #333;
}
.background {
   background-image: url('https://www.transparenttextures.com/patterns/arabesque.png');/* transparent png image */
   }
.col-one {
  background-color: rgb(255, 255, 0);
}
.col-two {
  background-color: rgb(0, 255, 255);
}
.col-three {
  background-color: rgb(0, 255, 0);
}

<div class="background col-one">
 1. Background
</div> 
<div class="background col-two">
 2. Background
</div> 
<div class="background col-three">
 3. Background
</div> 

¡POR FAVOR, ESPERE UN MINUTO! TOMA UN TIEMPO CARGAR LOS PATRONES EXTERNOS.

Este sitio web parece ser bastante lento ...

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

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

• sin subir

• sin html extra

• Supongo que la carga debería ser más rápida que la sombra de caja o el degradado 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>

Otro con un SVG como imagen de superposición en línea (nota: si usa #dentro del código svg, ¡debe codificar eso!):

background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1"><path fill="rgba(255, 255, 255, 0.4)" d="M0 0h1v1H0z"/></svg>')
                no-repeat center center/cover, 
            url('overlayed-image.jpg') no-repeat center center/cover;

Simplemente utilicé la propiedad css de imagen de fondo en el div de fondo de destino.
Nota: la imagen de fondo solo acepta funciones de color degradado.
Entonces utilicé el degradado lineal agregando el mismo color de superposición deseado dos veces (use el último valor rgba para controlar la opacidad del color).

Además, encontré estos dos recursos útiles para:

1. Agregue texto (o div con cualquier otro contenido) sobre la imagen de fondo: Imagen de héroe
2. Desenfocar solo la imagen de fondo, sin desenfocar el div en la parte superior: Imagen de fondo borrosa

HTML

<div class="header_div">
</div>

<div class="header_text">
  <h1>Header Text</h1>
</div>

CSS

.header_div {
  position: relative;
  text-align: cover;
  min-height: 90vh;
  margin-top: 5vh;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100vw;
  background-image: linear-gradient(rgba(38, 32, 96, 0.2), rgba(38, 32, 96, 0.4)), url("images\\header img2.jpg");
  filter: blur(2px);
}

.header_text {
  position: absolute;
  top: 50%;
  right: 50%;
  transform: translate(50%, -50%);
}

También puede agregar opacidad a su color de superposición.

En lugar de hacer

background: url('../img/bg/diagonalnoise.png');
background-color: rgba(248, 247, 216, 0.7);

Tu puedes hacer:

background: url('../img/bg/diagonalnoise.png');

Luego cree un nuevo estilo para el color de opacidad:

.colorStyle{
    background-color: rgba(248, 247, 216, 0.7);
    opacity: 0.8;
}

Cambie la opacidad a cualquier número que desee a continuación 1. Luego haga que este estilo de color tenga el mismo tamaño que su imagen. Deberia de funcionar.