CSS Hintergrund-blend-mode-Eigenschaft
Beispiele
Mixed Mode:
div {
Breite: 290px;
Höhe: 69px;
Hintergrund-size: 69px 290px;
background-repeat: no-repeat;
background-image: linear-Gradient ( nach rechts, grün 0%, weiß 100%), url ( 'logo.png');
Hintergrund-blend-Modus: farb- ausweichen;
}
Breite: 290px;
Höhe: 69px;
Hintergrund-size: 69px 290px;
background-repeat: no-repeat;
background-image: linear-Gradient ( nach rechts, grün 0%, weiß 100%), url ( 'logo.png');
Hintergrund-blend-Modus: farb- ausweichen;
}
Versuchen »
Definition und Verwendung
Hintergrund-blend-Modus Attribut definiert den Mischmodus der Hintergrundebene (Bildfarbe).
| Standard: | normal |
|---|---|
| Vererbt: | keine |
| Anima: | Nr. Siehe animierbaren |
| Version: | CSS3 |
| JavaScript-Syntax: | Objekt .style.backgroundBlendMode = "screen" |
Browser-Unterstützung
Die Zahlen in der Tabelle stellen die erste Browser die Eigenschaft Versionsnummer zu unterstützen.
| Immobilien | |||||
|---|---|---|---|---|---|
| Hintergrund-blend-Modus | 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;
Eigenschaft Wert
| Wert | Beschreibung | Beispiele |
|---|---|---|
| normal | Default. Einstellen des normalen Mischmodus. | Versuchen » |
| multiplizieren | Multiply-Modus. | Versuchen » |
| Bildschirm | Farbmodus. | Versuchen » |
| Auflage | Overlay-Modus. | Versuchen » |
| verdunkeln | Dimmer-Modus. | Versuchen » |
| aufhellen | Erhellen Modus. | Versuchen » |
| Farb ausweichen | Farbe Dodge-Modus. | Versuchen » |
| Sättigung | Sättigung-Modus. | Versuchen » |
| Farbe | Farbmodus. | Versuchen » |
| Helligkeit | Helligkeitsmodus. | Versuchen » |
In Verbindung stehende Artikel
CSS Tutorial: CSS Hintergrund