¿Capa de color semitransparente sobre imagen de fondo?

213

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

Respuestas:

217

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.

Johannes Klauß
fuente
11
no hay absolutamente ninguna razón para un posicionamiento relativo y absoluto.
Sven Bieder
2
Ah sí, por supuesto, estaba un poco en el popup modal, no sé por qué Tu respuesta es, por supuesto, más limpia y fácil.
Johannes Klauß
@ JohannesKlauß, ¿cómo es que su respuesta es más limpia y fácil? no está funcionando, al menos para mi caso.
Danny22
2
Creo que esto es más limpio. La caja-sombra tiene problemas si el contenido no superior a bg etc.
Jack
1
¡Solución perfecta!
Roy Shoa
302

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.

BevansDesign
fuente
3
¡Muy agradable! ¿Es esta una buena idea en cuanto al rendimiento? No he estudiado el rendimiento de box-shadow
Miguel Stevens
18
Buen truco pero un gran asesino de rendimiento. Esto ralentizará cada dispositivo móvil. Box shadow causa problemas de rendimiento en dispositivos móviles. Es mejor evitarlo, especialmente si hay otro camino a seguir.
Hexodus
44
Usted es un genio señor!
Mika
77
Solo una actualización un par de años después: actualmente uso este método en todo kotulas.com, y no he notado una desaceleración significativa. Podría convertirse en un problema si lo está utilizando en cientos de elementos, pero incluso en una página con más de 150 imágenes, no es un problema para mí. (Y esto está en una computadora de trabajo). Naturalmente, querrá probarlo con anticipación para asegurarse de que sea adecuado para usted. Y en cuanto a la compatibilidad del navegador anterior, dado que el problema es que el usuario no ve un efecto de desplazamiento (sin ningún otro problema), estoy de acuerdo con eso.
BevansDesign
8
Yo personalmente lo uso como esto: box-shadow: inset 0 0 0 100vmax rgba(0, 0, 0, .2).
Neurotransmisor el
135

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);
}
Tom
fuente
Esto funcionó muy bien, no puedes animar gradientes, sin embargo, si quisieras pulsar un color, no creas que eso es posible con ningún método.
sricks
1
Tuve background-size:cover;y me puse background-position:center center;en este elemento. Esto parece cancelar ese efecto.
Consuelo
Funciona muy bien con un tamaño de fondo: cubierta; después. En cromo al menos.
davidbonachera
Definitivamente, la forma más conveniente de teñir patrones e imágenes de fondo, pero tenga cuidado de verificarlo con Chrome y otros, especialmente si se aplica a la etiqueta del cuerpo, el cromo se desplazará con una tonelada de retraso. FF lo maneja bien.
Hastig Zusammenstellen
44
¿Soy el único lo suficientemente mayor como para obtener la referencia de Tom?
Abram
26

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;
}
yaufaniadam
fuente
2
Esta es una gran respuesta que no requiere elementos HTML adicionales. ¡Gracias!
patr1ck
26

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%;
}
Sven Bieder
fuente
16

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

d4ncer
fuente
Esto funciona, pero debe cambiar el segundo "left: 0;" a "abajo: 0;"
Matthew Hudson
1
Esta debería ser la respuesta aceptada, ya que evita la creación de elementos innecesarios. Solo asegúrese de que su imagen .background divtenga al menos una posición: relativa
mjsarfatti
6

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.
Kevin C.
fuente
44
Por favor, no publique enlaces como respuestas. Ponga el código relevante aquí, pero también enlace a la fuente desde donde lo copió.
Blazemonger
4

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

Hexodus
fuente
¿Puedes aplicar el color de fondo, por ejemplo, :hovery eso se superpondría en la parte superior de la imagen de fondo?
Sir
tomaría más tiempo iniciar Photoshop y hacer esto, en lugar de agregar algunas líneas de código.
nihiser
Intenté esto pero encontré que el png transparente era bastante grande (~ 500kb) en tamaño de archivo, lo que puede ser una desventaja de este enfoque
madz
@madz hablé de hacer un patrón, que no debería dar como resultado un archivo grande. Agregué un ejemplo usando una imagen de 110x110px que tiene tan poco como 5kb. Si realmente necesita una imagen más grande, intente usar tinypng.com para comprimirla.
Hexodus
2

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

Fanky
fuente
2

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>

Zortext
fuente
1

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;
lsblsb
fuente
0

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%);
}
Mimina
fuente
0

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.

Vaibhav Herugu
fuente