Beispiel
Geben Sie einen Mischmodus:
div {
width:
200px;
height: 200px;
background-size: 200px 200px;
background-repeat:no-repeat;
background-image:
linear-gradient(to right, black 0%, white 100%), url('w3css.gif');
background-blend-mode: color-dodge;
} Versuch es selber " Mehr "Try it Yourself" Sie "Try it Yourself" Beispiele unten.
Definition und Verwendung
Der Hintergrund-blend-Modus Eigenschaft definiert die Füllmethode jedes Hintergrundschicht (color and/or image) .
| Standardwert: | normal |
|---|---|
| Vererbt: | no |
| Anima: | no. Read about animatable |
| Version: | CSS3 |
| JavaScript-Syntax: | object .style.backgroundBlendMode="screen" |
Browser-Unterstützung
Die Zahlen in der Tabelle geben Sie die erste Browser-Version, die die Eigenschaft vollständig unterstützt.
| Eigentum | |||||
|---|---|---|---|---|---|
| background-blend-mode | 35.0 | Nicht unterstützt | 30.0 | 7.1 | 22.0 |
CSS-Syntax
background-blend-mode:
normal|multiply|screen|overlay|darken|lighten|color-dodge|saturation|color|luminosity;Eigenschaftswerte
| Wert | Beschreibung | Spiel es |
|---|---|---|
| normal | Dies ist die Standardeinstellung. Legt den Mischmodus in den Normal | Spiel es " |
| multiply | Legt die Füllmethode multiplizieren | Spiel es " |
| screen | Legt den Mischmodus zu screenen | Spiel es " |
| overlay | Legt den Mischmodus zu überlagern | Spiel es " |
| darken | Legt den Mischmodus zu verdunkeln | Spiel es " |
| lighten | Legt den Mischmodus zu erleichtern | Spiel es " |
| color-dodge | Legt die Füllmethode Farb ausweichen | Spiel es " |
| saturation | Legt den Mischmodus bis zur Sättigung | Spiel es " |
| color | Legt den Mischmodus zu färben | Spiel es " |
| luminosity | Legt den Mischmodus auf Helligkeit | Spiel es " |
Verwandte Seiten
CSS Tutorial: CSS Hintergrund