CSS agtergrond-vermenging-modus Eiendom
Voorbeeld
Spesifiseer die mengmodus van 'n agtergrondprent om "verhelder" te wees:
div {
background-repeat: no-repeat, repeat;
background-image: url("img_tree.gif"), url("paper.gif");
background-blend-mode: lighten;
}
Meer "Probeer dit self" voorbeelde hieronder.
Definisie en gebruik
Die background-blend-modeeienskap definieer die mengmodus van elke agtergrondlaag (kleur en/of beeld).
| Standaard waarde: | normaal |
|---|---|
| Geërf: | geen |
| Animateerbaar: | geen. Lees oor animeerbaar |
| Weergawe: | CSS3 |
| JavaScript-sintaksis: | voorwerp .style.backgroundBlendMode="skerm" |
Blaaierondersteuning
Die nommers in die tabel spesifiseer die eerste blaaierweergawe wat die eiendom ten volle ondersteun.
| Property | |||||
|---|---|---|---|---|---|
| background-blend-mode | 35.0 | 79.0 | 30.0 | 7.1 | 22.0 |
CSS-sintaksis
background-blend-mode: normal|multiply|screen|overlay|darken|lighten|color-dodge|saturation|color|luminosity;
Eiendomswaardes
| Value | Description | Play it |
|---|---|---|
| normal | This is default. Sets the blending mode to normal | |
| multiply | Sets the blending mode to multiply | |
| screen | Sets the blending mode to screen | |
| overlay | Sets the blending mode to overlay | |
| darken | Sets the blending mode to darken | |
| lighten | Sets the blending mode to lighten | |
| color-dodge | Sets the blending mode to color-dodge | |
| saturation | Sets the blending mode to saturation | |
| color | Sets the blending mode to color | |
| luminosity | Sets the blending mode to luminosity |
Meer voorbeelde
Voorbeeld
Spesifiseer die mengmodus om "vermenigvuldig" te wees:
div {
width: 400px;
height:
400px;
background-repeat: no-repeat, repeat;
background-image: url("img_tree.gif"), url("paper.gif");
background-blend-mode: multiply;
}
Voorbeeld
Spesifiseer die mengmodus as "skerm":
div {
width: 400px;
height:
400px;
background-repeat: no-repeat, repeat;
background-image: url("img_tree.gif"), url("paper.gif");
background-blend-mode: screen;
}
Voorbeeld
Spesifiseer die vermengingsmodus om "overlay" te wees:
div {
width: 400px;
height:
400px;
background-repeat: no-repeat, repeat;
background-image: url("img_tree.gif"), url("paper.gif");
background-blend-mode: overlay;
}
Voorbeeld
Spesifiseer die mengmodus om "donker" te wees:
div {
width: 400px;
height:
400px;
background-repeat: no-repeat, repeat;
background-image: url("img_tree.gif"), url("paper.gif");
background-blend-mode: darken;
}
Voorbeeld
Spesifiseer die mengmodus as "color-dodge":
div {
width: 400px;
height:
400px;
background-repeat: no-repeat, repeat;
background-image: url("img_tree.gif"), url("paper.gif");
background-blend-mode: color-dodge;
}
Voorbeeld
Spesifiseer die mengmodus as "versadiging":
div {
width: 400px;
height:
400px;
background-repeat: no-repeat, repeat;
background-image: url("img_tree.gif"), url("paper.gif");
background-blend-mode: saturation;
}
Voorbeeld
Spesifiseer die mengmodus om "kleur" te wees:
div {
width: 400px;
height:
400px;
background-repeat: no-repeat, repeat;
background-image: url("img_tree.gif"), url("paper.gif");
background-blend-mode: color;
}
Voorbeeld
Spesifiseer die mengmodus as "helderheid":
div {
width: 400px;
height:
400px;
background-repeat: no-repeat, repeat;
background-image: url("img_tree.gif"), url("paper.gif");
background-blend-mode: luminosity;
}
Voorbeeld
Spesifiseer die mengmodus as "normaal":
div {
width: 400px;
height:
400px;
background-repeat: no-repeat, repeat;
background-image: url("img_tree.gif"), url("paper.gif");
background-blend-mode: normal;
}
Verwante bladsye
CSS-tutoriaal: CSS-agtergrond