transparente - opacidad imagen de fondo css

Capa de color semitransparente sobre background-image?

Question

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

Answer 1

¿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:

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

Answer 2

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 una altura para la clase .background , si no hay otros elementos dentro de ella

Answer 3

Consulte mi respuesta en https://.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.

Answer 4

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

Answer 5

Entonces necesita 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%;
}

Answer 6

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

<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

Answer 7

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

Answer 8

Puede usar un píxel semitransparente, que puede generar, por ejemplo, here , 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

Answer 9

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.

Answer 10

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