CSS Almanac → Properties → M → mix-blend-mode

mix-blend-mode

Avatar of Robin Rendle
Robin Rendle am

DigitalOcean bietet Cloud-Produkte für jede Phase Ihrer Reise. Starten Sie mit 200 $ kostenlosem Guthaben!

Die Eigenschaft mix-blend-mode definiert, wie der Inhalt eines Elements mit seinem Hintergrund verschmolzen werden soll. Zum Beispiel könnte der Text einer <h1> auf interessante Weise mit dem Hintergrund dahinter verschmelzen.

.blend {
  mix-blend-mode: exclusion;
}

Im obigen Beispiel wurde der Inhalt durch mix-blend-mode so modifiziert, dass die Farben des Textes von seinem Hintergrund ausgeschlossen werden. Dies ist nur einer von vielen Werten für diese Eigenschaft.

Es gibt ein Problem mit Chrome 58+, bei dem mix-blend-mode auf Elementen, die auf einem transparenten gesetzt sind, nicht gerendert wird. Dies wurde als Problem 711955 in Chrome gemeldet, das zum Zeitpunkt der Erstellung dieses Dokuments zugewiesen ist. In der Zwischenzeit ist eine einfache Lösung, dem Body-Element eine weiße (oder eigentlich jede) Hintergrundfarbe zuzuweisen.

Werte

  • initial: die Standardeinstellung der Eigenschaft, die keinen Mischmodus setzt.
  • inherit: ein Element erbt den Mischmodus von seinem Elternelement.
  • unset: entfernt den aktuellen Mischmodus von einem Element.
  • <blend-mode>: dies ist das Attribut eines der unten aufgeführten Mischmodi
  • normal: dieses Attribut wendet keinerlei Mischung an.
  • multiply: das Element wird mit dem Hintergrund multipliziert und ersetzt die Hintergrundfarbe. Die resultierende Farbe ist immer so dunkel wie der Hintergrund.
  • screen: multipliziert den Hintergrund und den Inhalt und komplementiert dann das Ergebnis. Dies führt zu einem Inhalt, der heller als die background-color ist.
  • overlay: multipliziert oder überlagert den Inhalt je nach Hintergrundfarbe. Dies ist die Umkehrung des hard-light Mischmodus.
  • darken: der Hintergrund wird durch den Inhalt ersetzt, wenn der Inhalt dunkler ist, andernfalls bleibt er unverändert.
  • lighten: der Hintergrund wird durch den Inhalt ersetzt, wenn der Inhalt heller ist.
  • color-dodge: dieses Attribut hellt die Hintergrundfarbe auf, um die Farbe des Inhalts widerzuspiegeln.
  • color-burn: dies verdunkelt den Hintergrund, um die natürliche Farbe des Inhalts widerzuspiegeln.
  • hard-light: je nach Farbe des Inhalts überlagert oder multipliziert dieses Attribut ihn.
  • soft-light: je nach Farbe des Inhalts verdunkelt oder hellt dieses ihn auf.
  • difference: dies subtrahiert die dunklere der beiden Farben von der hellsten Farbe.
  • exclusion: ähnlich wie difference, aber mit geringerem Kontrast.
  • hue: erzeugt eine Farbe mit dem Farbton des Inhalts, kombiniert mit der Sättigung und Luminosität des Hintergrunds.
  • saturation: erzeugt eine Farbe mit der Sättigung des Inhalts, kombiniert mit dem Farbton und der Luminosität des Hintergrunds.
  • color: erzeugt eine Farbe mit dem Farbton und der Sättigung des Inhalts und der Luminosität des Hintergrunds.
  • luminosity: erzeugt eine Farbe mit der Luminosität des Inhalts und dem Farbton und der Sättigung des Hintergrunds. Dies ist die Umkehrung des color Attributs.

Es ist erwähnenswert, dass das Setzen eines Mischmodus außer normal einen neuen Stapelkontext erzeugt, der dann mit dem Stapelkontext, der das Element enthält, gemischt werden muss.

Die Auswirkungen dieser Werte werden in der folgenden Demo gezeigt

Weitere Informationen

Browser-Unterstützung

Diese Browser-Supportdaten stammen von Caniuse, wo Sie weitere Details finden. Eine Zahl zeigt an, dass der Browser die Funktion ab dieser Version unterstützt.

Desktop

ChromeFirefoxIEEdgeSafari
4132Nein79TP

Mobil / Tablet

Android ChromeAndroid FirefoxAndroidiOS Safari
12712712718.0
Psst! Erstellen Sie ein DigitalOcean-Konto und erhalten Sie 200 $ kostenloses Guthaben für Cloud-basiertes Hosting und Services.

Kommentare

  1. Patrick D
    Permalink zum Kommentar#

    Ich vermute, das ist unüberwindbar, ähnlich wie bei geerbter Opazität. Aber hat jemand einen Weg gefunden, einen mix-blend-mode auf einen Container anzuwenden und dann die Effekte NICHT auf seine Kinder anzuwenden? (z. B. den farbigen Hintergrund eines Divs mit dem darunter liegenden Inhalt zu multiplizieren, während der Text im Div opak bleibt). Ich habe mit mix-blend-mode: unset; für die Kindelemente herumgespielt, aber bisher ohne Erfolg.

    Ich glaube nicht, dass es eine Möglichkeit gibt, die Kindelemente eines Divs selektiv zu mischen, aber da dies neu und noch nicht gut erforscht ist, dachte ich, es wäre einen Versuch wert. Danke!

    Antworten
    • Robin Rendle
      Permalink zum Kommentar#

      Ah, ich habe mir das für die Demos angesehen, konnte aber keine Möglichkeit finden, Kindelemente von den Stilen der Eltern zu trennen. Die Dokumentation ist derzeit leider wirklich mangelhaft.

    • Patrick D
      Permalink zum Kommentar#

      Danke, Robin! Ich werde posten, wenn ich etwas herausfinde.

    • Ragdoll
      Permalink zum Kommentar#

      Die neue Eigenschaft „isolation“ löst Ihr Problem nicht genau, aber sie könnte potenziell helfen, einige Probleme mit Mischmodi zu lösen. Ehrlich gesagt, habe ich noch keinen praktischen Bedarf dafür gefunden, aber meine eigenen Experimente sind bisher eher leichtgewichtig.

      Ich dachte nur, ich teile es, um das Wort zu verbreiten und zu sehen, ob andere es herausfinden können. Ich stimme vollkommen zu, dass wir eine Möglichkeit brauchen, Kindknoten von Containern zu trennen, bevor wir Mischungen auf diese Container anwenden.

    • James
      Permalink zum Kommentar#

      Ich habe dasselbe Problem und kann keine Lösung finden…

    • Techtiger255 CodeMode
      Permalink zum Kommentar#

      Mix-Background-Mode: ;
      Das sollte Ihren Zweck erfüllen :D sehen Sie es hier in Aktion
      Mozilla Developer Network
      CSS Tricks

  2. Steve
    Permalink zum Kommentar#

    Sehen Sie sich diesen sehr geschmackvollen Einsatz von mix-blend-mode auf der Website von Ableton an: https://loop.ableton.com/register/

    Antworten
    • Ragdoll
      Permalink zum Kommentar#

      Sieht gut aus, verursacht aber viel Scroll-Ruckeln in Firefox. Die Leistung ist stark reduziert. Es fühlt sich kaputt an, nur für Text.

    • Steve Chab
      Permalink zum Kommentar#

      Ja, die Unterstützung scheint immer noch etwas wackelig zu sein.

    • Ben Van Looy
      Permalink zum Kommentar#

      Ich brauchte gestern den Mischmodus, aber nicht für die Kinder meines Containers.

      Es war nur für eine Kopfzeile, also habe ich eine Ebene mit dem Mischmodus und eine weitere absolute Ebene erstellt, die dieselben Elemente auf dieselbe Weise wie meine relative Ebene positioniert hatte.

      Sicher, keine saubere Lösung, aber sie erfüllt vorerst ihren Zweck.

  3. Tomas M
    Permalink zum Kommentar#

    Vorsicht: Die Verwendung von mix-blend-mode kann Ihre CSS-Übergänge wie sanfte Opazität unterbrechen, da die Opazität nicht reibungslos über die GPU animiert wird, wenn ein Kindelement den Stil mix-blend-mode hat (zumindest nach heutigem Stand unter Chrome für den Mischmodus 'difference').

    Antworten
  4. Dikkie
    Permalink zum Kommentar#

    Ist Safari bereits aktualisiert, um die Werte hue, saturation, color und luminosity zu unterstützen?

    Antworten
  5. Dickoless Cage
    Permalink zum Kommentar#

    Danke. Die kleine Animation unten hat sehr geholfen. Schöne kleine Beispiele, die den Punkt verdeutlichen.

    Antworten
  6. Scott Padgett
    Permalink zum Kommentar#

    Ich habe einen Weg gefunden. Um Blend-Modi (nicht Background-Blend-Modi) auf Elemente anzuwenden, müssen Sie dieses Element zu einem FONT-ICON machen – denn Schriften sind für Mischmodi offen (im Gegensatz zu Background-Blend-Modi).

    Unsere Designer hatten ein Design, das Farbschichten über unseren Bildern erforderte. Aber das Bild musste eine IMG und kein Hintergrundbild sein.

    Also habe ich die von den Designern entworfene Form (einen schrägen Block) genommen und diesen Block in Illustrator als SVG nachgebildet. Dann habe ich ihn in ein Font-Icon kompiliert und dieses Icon dem :before-Attribut zugewiesen.

    hero .color-container .icon-blockangle:before {
    position: absolute;
    font-size: 50vw;
    right: -3rem;
    top: -3rem;
mix-blend-mode: multiply;
color: #cc1f20;
}
    Antworten
  7. Merlin
    Permalink zum Kommentar#

    Je nach Positionierungsanforderungen, wie wäre es, einen separaten Div für Ihren Hintergrund zu erstellen (innerhalb des Containers) und diesem Ihre mix-blend-mode Eigenschaften / Effekte zu geben und dann wie gewohnt mit Ihren Containerelementen fortzufahren? Beispiel: https://codepen.io/Merlin007/pen/wJqEaZ

    Antworten
  8. MaxArt
    Permalink zum Kommentar#

    Das erste Beispiel funktioniert in Chrome seit Version 58 nicht mehr. Um es wieder funktionsfähig zu machen, müssen Sie einen weißen Hintergrund hinter das Bild legen, daher wäre der perfekte Ort hier

    html {
  background-color: white;
}
    Antworten
  9. Andrey Zadvornov
    Permalink zum Kommentar#

    Ich versuche, es hier zu implementieren – bfmos.ru
    Es ist auf WordPress, Enfold.
    Das, was ich zu ändern versuche – ist ein kleiner Balken
    mit einer Telefonnummer ganz oben
    Das Beispiel für Code, das ich verwende, ist
    #top .av_header_transparency #header_meta {
    background: rgba(255,255,255,1);
    mix-blend-mode: difference;
    }

    Und die Hauptfrage ist: Warum funktioniert mix-blend-mode
    bei einigen Elementen und bei anderen nicht?
    Ich denke, cssTricks sollte einen solchen Artikel posten)
    (oder ich denke, ich werde in der nächsten Minute dasselbe googeln)
    Bitte helfen Sie, ich habe einen Haken bei "Send Me Email to Notify me" gesetzt)

    Antworten
    • Geoff Graham
      Permalink zum Kommentar#

      Hallo Andrey! Ich konnte keine dieser Selektoren auf der Seite finden – vielleicht ein Screenshot des Elements in den Entwicklertools?

  10. Andrey Zadvornov
    Permalink zum Kommentar#

    Eigentlich sind das Standardeinstellungen. Ich habe es nicht überprüft, aber sie müssen es sein, da ich CSS über "Element untersuchen" angewendet habe, also müsste es funktionieren.

    Antworten
  11. MSCAU
    Permalink zum Kommentar#

    Ich muss leider feststellen, dass ein Bild überhaupt nicht mit dem Seitenhintergrund gemischt wird. Wenn Sie also einen roten Hintergrund im BODY-Tag haben und ein Foto auf der Seite mit mix-blend-mode, wird das Foto nicht mit dem Hintergrund gemischt. Sie müssen einen roten Wrapper-DIV um das Bild legen, um die Mischung zu sehen: https://codepen.io/MSCAU/pen/ywarGV

    Antworten
  12. thsmn
    Permalink zum Kommentar#

    Im Gegensatz zu diesem Artikel funktioniert mix-blend-mode nicht in MS Edge (Version 44.18362, Win 10). Habe es gerade getestet. Caniuse.com listet es auch als nicht unterstützt auf.

    Antworten
  13. Louise CW
    Permalink zum Kommentar#

    Ich habe mir semantisches HTML angesehen und hoffte, den Hintergrund auf einem Tag setzen zu können. Das funktioniert jedoch nicht, daher muss ich einen Container-Div um das Picture-Tag hinzufügen.
    Wie ist die Situation mit Elementen, die auch semantisches HTML sind?

    Antworten
  14. Gabriele
    Permalink zum Kommentar#

    Ich habe es mehrmals versucht. Ich bekomme mix-blend-mode nicht zum Laufen. Können Sie mir bitte helfen?

    https://codepen.io/Girardini/full/WNpGWYN

    Antworten

Antwort hinterlassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

© .