DigitalOcean bietet Cloud-Produkte für jede Phase Ihrer Reise. Starten Sie mit 200 $ kostenlosem Guthaben!
Die Eigenschaft background-blend-mode definiert, wie das background-image eines Elements mit seinem background-color gemischt werden soll.
.container {
background-image: url('image.jpg');
background-color: red;
background-blend-mode: screen;
}In der obigen Demo hat das standardmäßige background-image auf der linken Seite keinen Mischmodus eingestellt, sodass das Bild über der background-color liegt. Auf der rechten Seite hingegen hat der Mischmodus das background-image mit der roten background-color darunter modifiziert. Aber beachten Sie, dass die Textfarbe von dieser zusätzlichen Eigenschaft *nicht* beeinflusst wurde.
Werte
initial: Der Standardwert ohne Mischung.inherit: Übernimmt den Mischmodus des übergeordneten Elements.<blend-mode>: Ein Wert, der das Hintergrundbild je nach seinerbackground-colorändert.
Der Wert <blend-mode> kann als einer der folgenden Werte eingestellt werden (in den Demos unten ist die background-color rot):
normal: Wie oben gezeigt, wird die Hintergrundfarbe nicht durch das Hintergrundbild durchscheinen.
multiply: Das Hintergrundbild und die Hintergrundfarbe werden multipliziert, was typischerweise zu einem dunkleren Bild führt als zuvor.
screen: Sowohl Bild als auch Farbe werden invertiert, multipliziert und dann erneut invertiert.
overlay: Die Hintergrundfarbe wird mit dem Hintergrundbild gemischt, um die Helligkeit oder Dunkelheit des Hintergrunds widerzuspiegeln.
darken: Wenn das Hintergrundbild dunkler ist als die Hintergrundfarbe, wird das Bild ersetzt, andernfalls bleibt es unverändert.
lighten: Wenn das Hintergrundbild heller ist als die Hintergrundfarbe, wird das Bild ersetzt, andernfalls bleibt es unverändert.
color-dodge: Die Hintergrundfarbe wird durch die Inverse des Hintergrundbilds geteilt. Dies ist dem Mischmodus `screen` sehr ähnlich.
color-burn: Die Hintergrundfarbe wird invertiert, durch das Hintergrundbild geteilt und erneut invertiert. Dies ähnelt `multiply`.
hard-light: Wenn das Hintergrundbild heller ist als die Hintergrundfarbe, ist das Ergebnis `multiply`, oder wenn es dunkler ist, ist das Ergebnis `screen`.
soft-light: Das Endergebnis ähnelt `hard-light`, ist aber weicher, da es wie ein diffuses Scheinwerferlicht auf dem Bild wirkt.
difference: Das Ergebnis entsteht durch Subtraktion der dunkleren Farbe des Hintergrundbilds und der Hintergrundfarbe von der hellsten. Oft hat das Bild einen sehr hohen Kontrast.
exclusion: Das Ergebnis ist dem Modus `difference` sehr ähnlich, jedoch mit einem etwas geringeren Kontrast.
hue: Das Ergebnis ist der Farbton des Hintergrundbilds, kombiniert mit der Luminanz und Sättigung der Hintergrundfarbe.
saturation: Behält die Sättigung des Hintergrundbilds bei, während der Farbton und die Luminanz der Hintergrundfarbe gemischt werden.
color: Behält Farbton und Sättigung des Hintergrundbilds und die Luminanz der Hintergrundfarbe bei. In diesem Beispiel, da das Bild grau ist und der Effekt Graustufen beibehält, erhalten wir nur einen großen grauen Klecks.
luminosity: Die Luminanz der oberen Farbe bleibt erhalten, während die Sättigung und der Farbton der Hintergrundfarbe verwendet werden.Kombination mehrerer Mischmodi
Jede Hintergrundebene kann nur einen Mischmodus haben. Wenn wir jedoch mehrere lineare Verläufe verwenden, kann jeder von ihnen seinen eigenen Mischmodus haben, was zu einer interessanten Darstellung führt.
Dies wird erreicht, indem diese Werte in der Reihenfolge der Hintergrundebene aufgelistet werden, die Sie beeinflussen möchten.
.container {
background:
linear-gradient(purple 0%, red 90%),
linear-gradient(to right, purple 0%, yellow 90%),
url('image.jpg') 30px,
url('image.jpg') 20px;
background-blend-mode: screen, difference, lighten;
}Der erste lineare Verlauf hat den Mischmodus `screen`, gefolgt vom zweiten linearen Verlauf, der `difference` hat, und dem ersten Hintergrundbild, auf das `lighten` angewendet wird.
Demo
Hier ist ein funktionierendes Beispiel dafür, wie diese Werte je nach background-color interpretiert werden.
Browser-Unterstützung
Diese Browser-Support-Daten stammen von Caniuse, wo Sie weitere Details finden. Eine Zahl gibt an, dass der Browser die Funktion ab dieser Version unterstützt.
Desktop
| Chrome | Firefox | IE | Edge | Safari |
|---|---|---|---|---|
| 35 | 30 | Nein | 79 | 10.1 |
Mobil / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 127 | 127 | 127 | 10.3 |
Gibt es eine Möglichkeit, das in IE zu realisieren?
Gibt es eine Möglichkeit, das in IE zu realisieren?
Oder eine Lösung, die in allen IE-Versionen funktioniert? Bisher habe ich keine Lösung gefunden, Microsoft will den Mischmodus nicht unterstützen. Auf diese Weise können wir den Mischmodus nicht verwenden. Ich habe Lösungen mit JavaScript gefunden, die meisten haben Probleme mit IE 11 und Edge, und die Farbe ist im Browser unterschiedlich.
Rene
Ich habe die einzige und beste funktionierende Lösung von Matt Slack gefunden.
http://collectiveidea.com/blog/archives/2016/06/02/fun-with-svg-css-background-blend-mode-fallback
Ich habe den JavaScript-Teil (abgesehen von der Feature-Erkennung) nicht verwendet, da ich den Bildpfad über mein CMS-Template direkt in das SVG einfügen konnte.
Das einzige, was einige Zeit in Anspruch nahm, war die Verwendung von
<base href="">, das mit dem Attributfilter="url(#myFilter)"kollidiert. In diesen Fällen musste ich den Pfad zur aktuellen Seite hinzufügenfilter="url(/mypage.html#myFilter)".Hier ist Matts JS-Version +
<base>-Tag (http://codepen.io/localhorst/pen/QGEMmE).