Capa de color semitransparente sobre background-image?

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 claro y transparente. Debajo está lo que probé pero que no funcionó. ¿Hay alguna manera de poner la capa de color sobre la imagen de fondo? Gracias de antemano por sus respuestas. Aclamaciones. Bagazo.

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:

 

Por supuesto, debe definir un ancho y una altura para la clase .background , 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 sombreado de caja.

Desde CSS-Tricks … hay una manera de un paso para hacer esto sin indexación z y sin agregar pseudoelementos: requiere gradiente lineal, lo que creo que significa que necesitas soporte CSS3

 .tinted-image { background: /* 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 stack de fondo. https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient

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

 

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

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

HTML

 

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 general de las posibles soluciones:

  1. usando múltiples fondos con un degradado lineal,
  2. fondos múltiples con un PNG generado, o
  3. diseñar un: after pseudoelement para actuar como una capa secundaria de fondo.

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

CSS:

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

HTML:

 
...

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 extra

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