css - transparente - Superponer una imagen de fondo con un fondo de color rgba

opacidad imagen de fondo css

Question

Tengo un div con una background-image . Quiero superponer la imagen de fondo con un color rgba(0,0,0,0.1) ) cuando el usuario coloca el div.

Me preguntaba si existe una solución de div (es decir, no con múltiples divs, uno para la imagen y otro para el color, etc.).

Intenté varias cosas:

<div class="the-div" id="test-1"></div>
<div class="the-div" id="test-2"></div>
<div class="the-div" id="test-3"></div>

Y este CSS:

.the-div {
    background-image: url(''the-image'');
    margin: 10px;
    width: 200px;
    height: 80px;
}

#test-1:hover {
    background-color: rgba(0,0,0,0.1);
}

#test-2:hover {
    background: url(''the-image''), rgba(0,0,0,0.1);
}

#test-3:hover {
    background: rgba(0,0,0,0.1);
}

Mira este violín .

La única opción que vi es hacer otra imagen, con superposición, precargarla usando JavaScript y luego usar .the-div:hover { background: url(''the-new-image''); } .the-div:hover { background: url(''the-new-image''); } . Sin embargo, me gustaría una solución solo CSS (más ordenada, menos solicitudes HTTP, menos disco duro). ¿Hay alguna?

Answer 1

He conseguido lo siguiente para trabajar:

html {
  background:
      linear-gradient(rgba(0,184,255,0.45),rgba(0,184,255,0.45)),
      url(''bgimage.jpg'') no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

Lo anterior producirá una superposición azul opaca agradable.

Answer 2

Idealmente, la propiedad de fondo nos permitiría crear capas de varios fondos similares a las capas de imágenes de fondo detalladas en http://www.css3.info/preview/multiple-backgrounds/ . Lamentablemente, al menos en Chrome (40.0.2214.115), agregar un fondo de rgba junto a un fondo de imagen de url () parece romper la propiedad.

La solución que he encontrado es renderizar la capa de rgba como una imagen codificada en Base64 de 1px * 1px y alinearla.

.the-div:hover {
  background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNgkAQAABwAGkn5GOoAAAAASUVORK5CYII=), url("the-image.png");
}

para las imágenes de 1 * 1 píxel codificadas en base64 que utilicé http://px64.net/

Aquí está su jsfiddle con estos cambios realizados. http://jsfiddle.net/325Ft/49/ (también cambié la imagen a una que todavía existe en Internet)

Answer 3

La solución de PeterVR tiene la desventaja de que el color adicional se muestra en la parte superior de todo el bloque HTML, lo que significa que también se muestra en la parte superior del contenido div, no solo en la parte superior de la imagen de fondo. Esto está bien si tu div está vacío, pero si no está usando un gradiente lineal podría ser una mejor solución:

<div class="the-div">Red text</div>

<style type="text/css">
  .the-div
  {
    background-image: url("the-image.png");
    color: #f00;
    margin: 10px;
    width: 200px;
    height: 80px;
  }
  .the-div:hover
  {
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), url("the-image.png");
    background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), url("the-image.png");
    background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), url("the-image.png");
    background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), url("the-image.png");
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.1))), url("the-image.png");
    background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), url("the-image.png");
  }
</style>

Ver fiddle . Lástima que las especificaciones de gradiente son actualmente un desastre. Consulte la tabla de compatibilidad , el código anterior debe funcionar en cualquier navegador con una cuota de mercado notable, con la excepción de MSIE 9.0 y anteriores.

Editar (marzo de 2017): el estado de la web ahora es mucho menos complicado. Por lo tanto, las líneas linear-gradient (compatibles con Firefox e Internet Explorer) y -webkit-linear-gradient (compatibles con Chrome, Opera y Safari) son suficientes, ya no son necesarias versiones adicionales prefijadas.

Answer 4

Sí, hay una manera de hacer esto. Podría usar un pseudo-elemento after para colocar un bloque encima de su imagen de fondo. Algo como esto: http://jsfiddle.net/Pevara/N2U6B/

El css para :after ve así:

#the-div:hover:after {
    content: '' '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: rgba(0,0,0,.5);
}

editar:
Cuando desee aplicar esto a un elemento no vacío, y simplemente obtener la superposición en el fondo, puede hacerlo aplicando un z-index positivo al elemento y uno negativo a :after . Algo como esto:

#the-div {
    ...
    z-index: 1;
}
#the-div:hover:after {
    ...
    z-index: -1;
}

Y el violín actualizado: http://jsfiddle.net/N2U6B/255/

Answer 5

/* Working method */
.tinted-image {
  background: 
    /* top, transparent red, faked with gradient */ 
    linear-gradient(
      rgba(255, 0, 0, 0.45), 
      rgba(255, 0, 0, 0.45)
    ),
    /* bottom, image */
    url(https://upload.wikimedia.org/wikipedia/commons/7/73/Lion_waiting_in_Namibia.jpg);
    height: 1280px;
    width: 960px;
    background-size: cover;
}

.tinted-image p {
    color: #fff;
    padding: 100px;
  }

<div class="tinted-image">
  
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam distinctio, temporibus tempora a eveniet quas  qui veritatis sunt perferendis harum!</p>
  
</div>

fuente: https://css-tricks.com/tinted-images-multiple-backgrounds/