css - toda - imagen de fondo html5

¿Cómo puedo tintar una imagen de fondo con CSS?

Question

Tengo una imagen de fondo configurada a través de CSS.

html {
background-image: url(''../img/cello.jpg'');
background-attachment: fixed;
background-size: 100%;
}

Planeo tener una imagen de fondo diferente para diferentes páginas del sitio web: por eso es importante que el texto sea legible sobre él. En este momento tengo un fondo negro translúcido en mi cuadro de contenido #main en el medio como este para garantizar la legibilidad:

#main {
background: rgba(0, 0, 0, 0.5);
}

Sin embargo, lo que realmente quiero hacer es tener ese tipo de fondo translúcido en toda la imagen de fondo, porque la caja negra se ve un poco torpe. He intentado hacer un <div id=#tint> que incluye todo el documento HTML y dar rgba (0, 0, 0, 0.5) a #tint, pero eso no funciona en absoluto, tampoco puedo obtener nada para cambiar o puedo hacer que todo el fondo se convierta en un simple gris sin imagen de fondo visible en absoluto. ¿Esto simplemente no es posible?

Answer 1

Utilice el background-blend-mode de background-blend-mode para un tinte simple

Puedes usar la propiedad css de background-blend-mode :

.background-tint {
  background-color: rgba(200,100,0,.5); // Tint color
  background-blend-mode: multiply;
}

Colóquelo en cualquier elemento con una imagen de fondo y listo.

La propiedad está bien soportada en los navegadores modernos que NO incluyen IE más reciente y Edge ( bajo consideración ). Para navegadores no compatibles puede usar un polyfill .

Demo de trabajo

Otras opciones

Utilice un degradado lineal plano y una superposición de fondo múltiple

.background-tint {
  background-image: 
    linear-gradient( rgba(0,0,0,.5), rgba(0,0,0,.5) ),
    url(''http://placehold.it/420'')
}

Creo que esta es la técnica más utilizada, pero tiene el inconveniente de estar codificada, es decir, no puedes tomar una clase, pegarla en un elemento y hacer un tinte.

Podrías convertir esto en una mezcla menor o sass, algo como:

less

.background-tint(@tint-color, @image-url) {
  background-image: 
    linear-gradient( @tint-color, @tint-color ),
    url( @image-url )
}

sass

@mixin background-tint($tint_color, $image_url) {
  background-image: 
    linear-gradient( $tint_color, $tint_color ),
    url( $image_url )
}

Demo de trabajo

Utilizar un fondo transparente

.background-tint { position: relative; }

.background-tint::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,.5);
}

Este método tiene la ventaja de trabajar en la mayoría de los navegadores y es solo una clase agradable que agrega a cualquier elemento. El inconveniente es que si tiene algo más dentro de ese elemento, tendrá que envolverlo en un div con algún tipo de posición de position: relative funcionaría mejor.

Ejemplo:

<div class="background-tint">
  <div class="u-relative">Some text here</div>
</div>

.u-relative { position: relative; }

Demo de trabajo

Answer 2

Creo que necesitas crear un elemento de superposición (potencialmente div ) que tenga el fondo translúcido buscado. Algo como:

.overlay {
    z-index: 1;
    height: 100%;
    width: 100%;
    position: fixed;
    overflow: auto;
    top: 0px;
    left: 0px;
    background: rgba(0, 0, 0, 0.7); /*can be anything, of course*/
}

Y, por supuesto, una pequeña demostración: pequeño enlace .

Answer 3

Esto funciono muy bien para mi:

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

.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(image.jpg);
}

Y basándose en otra respuesta, puede hacer esto con los colores existentes en menos como:

linear-gradient(
  fade(@brand-primary, 50%),
  fade(@brand-primary, 50%)
),

Answer 4

Prueba la opacidad:

opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */

Answer 5

Sería la propiedad de overlay https://dvcs.w3.org/hg/FXTF/rawfile/tip/compositing/index.html#blendingoverlay Pero es un borrador. No confíes en ello