background-blend-mode

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨Januar 2020⁩.

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

Probieren Sie es aus

background-blend-mode: normal;

background-blend-mode: multiply;

background-blend-mode: hard-light;

background-blend-mode: difference;

<section class="default-example" id="default-example"> <div class="example-container"> <div class="transition-all" id="example-element"></div> </div> </section>

#example-element { background-color: green; background-image: url("/shared-assets/images/examples/balloon.jpg"); width: 250px; height: 305px; }

Die Mischmodi sollten in der gleichen Reihenfolge wie die Eigenschaft background-image definiert werden. Wenn die Längen der Listen von Mischmodi und Hintergrundbildern nicht gleich sind, werden sie so oft wiederholt und/oder gekürzt, bis die Längen übereinstimmen.

Syntax

css

/* One value */ background-blend-mode: normal; /* Two values, one per background */ background-blend-mode: darken, luminosity; /* Global values */ background-blend-mode: inherit; background-blend-mode: initial; background-blend-mode: revert; background-blend-mode: revert-layer; background-blend-mode: unset;

Werte

<blend-mode>: Der anzuwendende Mischmodus. Es kann mehrere Werte geben, getrennt durch Kommas.

Formale Definition

Anfangswert	`normal`
Anwendbar auf	Alle Elemente. In SVG wird er auf Containerelemente, Grafikelemente und Grafiken referenzierende Elemente angewandt.. Auch anwendbar auf `::first-letter` und `::first-line`.
Vererbt	Nein
Berechneter Wert	wie angegeben
Animationstyp	Not animatable

Formale Syntax

background-blend-mode = 
 <mix-blend-mode>#

Beispiele

Einfaches Beispiel

css

.item { width: 300px; height: 300px; background: url("image1.png"), url("image2.png"); background-blend-mode: screen; }

Probieren Sie verschiedene Mischmodi aus

<div id="div"></div> <select id="select"> <option>normal</option> <option>multiply</option> <option selected>screen</option> <option>overlay</option> <option>darken</option> <option>lighten</option> <option>color-dodge</option> <option>color-burn</option> <option>hard-light</option> <option>soft-light</option> <option>difference</option> <option>exclusion</option> <option>hue</option> <option>saturation</option> <option>color</option> <option>luminosity</option> </select>

#div { width: 300px; height: 300px; background: url("br.png"), url("tr.png"); background-blend-mode: screen; }

document.getElementById("select").onchange = (event) => { document.getElementById("div").style.backgroundBlendMode = document.getElementById("select").selectedOptions[0].innerHTML; }; console.log(document.getElementById("div"));

Spezifikationen

Specification
Compositing and Blending Level 2 # background-blend-mode

Browser-Kompatibilität

Siehe auch

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden