wake-up-neo.com

Wie füge ich einem Hintergrundbild eine Farbüberlagerung hinzu?

Ich habe diese Frage sowohl im SO als auch im Web viel gesehen. Aber keiner von ihnen war das, wonach ich gesucht habe.

Wie füge ich einem Hintergrundbild eine Farbüberlagerung nur mit CSS hinzu?

Beispiel HTML:

<div class="testclass">
</div>

Beispiel CSS:

.testclass {
    background-image: url("../img/img.jpg");
}

Bitte beachten Sie:

  • Ich möchte dieses Problem nur mit CSS lösen. ich möchte KEIN untergeordnetes div innerhalb der div "Testklasse" für die Farbüberlagerung hinzufügen.

  • Dies sollte kein "Hover-Effekt" sein. Ich möchte dem Hintergrundbild einfach nur einen Farb-Overlay hinzufügen.

  • Ich möchte in der Lage sein, die Deckkraft zu verwenden, d. H. Ich suche nach einer Lösung, die RGBA-Farben ermöglicht.

  • Ich suche nur eine Farbe, sagen wir schwarz. Kein Gefälle.

Ist das möglich? (Es würde mich wundern, wenn nicht, aber ich konnte nichts dazu finden.) Und wenn ja, wie kann ich das am besten erreichen?

Alle Vorschläge und Ratschläge sind willkommen!

43
Alex

Ich sehe 2 einfache Möglichkeiten:

  • mehrfacher Hintergrund mit einem durchscheinenden einzelnen Farbverlauf über dem Bild
  • hudge Inset Shadow

farbverlaufsoption:

html {
  min-height:100%;
  background:linear-gradient(0deg,rgba(255,0,150,0.3),rgba(255,0,150,0.3)),url(http://lorempixel.com/800/600/nature/2);
  background-size:cover;
  }

schattenoption:

html {
  min-height:100%;
  background:url(http://lorempixel.com/800/600/nature/2);
  background-size:cover;
  box-shadow:inset 0 0 0 2000px rgba(255,0,150,0.3);
  }

ein altes Codepen von mir mit wenigen Beispielen


eine dritte Option

  • mit Hintergrund-Blen-Modus :

    Das background-blend-mode CSS-Eigenschaft legt fest, wie die Hintergrundbilder eines Elements miteinander und mit der Hintergrundfarbe des Elements verschmelzen sollen.

html {
  min-height:100%;
  background:url(http://lorempixel.com/800/600/nature/2) rgba(255,0,150,0.3);
  background-size:cover;
  background-blend-mode: multiply;
  }
106
G-Cyr

Sie können ein Pseudoelement verwenden, um das Overlay zu erstellen.

.testclass {
  background-image: url("../img/img.jpg");
  position: relative;
}
.testclass:before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: 0; bottom: 0;
  background: rgba(0,0,0,.5);
}
25
Stickers

background-image nimmt mehrere Werte an.

also eine Kombination von nur 1 Farbe linear-Farbverlauf und css blend modes macht den Trick.

.testclass {
    background-image: url("../images/image.jpg"), linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5));
    background-blend-mode: overlay;
}

beachten Sie, dass IE/Edge überhaupt keine Unterstützung für CSS-Mischmodi bietet.

12
Uzi

Probieren Sie es aus, es ist einfach und klar. Ich habe es von hier gefunden: https://css-tricks.com/tinted-images-multiple-backgrounds/

.tinted-image {

  width: 300px;
  height: 200px;

  background: 
    /* top, transparent red */ 
    linear-gradient(
      rgba(255, 0, 0, 0.45), 
      rgba(255, 0, 0, 0.45)
    ),
    /* bottom, image */
    url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/owl1.jpg);
}
3
Udara