Vlastnost CSS pozadí-prolnutí
Příklad
Určete režim prolnutí obrázku na pozadí, který má být "zesvětlen":
div {
background-repeat: no-repeat, repeat;
background-image: url("img_tree.gif"), url("paper.gif");
background-blend-mode: lighten;
}
Další příklady „Vyzkoušejte si to sami“ níže.
Definice a použití
Vlastnost background-blend-mode
definuje režim prolnutí každé vrstvy pozadí (barvy a/nebo obrázku).
Výchozí hodnota: | normální |
---|---|
Zděděno: | Ne |
Animovatelné: | Ne. Přečtěte si o tématu Animable |
Verze: | CSS3 |
Syntaxe JavaScriptu: | objekt .style.backgroundBlendMode="screen" |
Podpora prohlížeče
Čísla v tabulce určují první verzi prohlížeče, která plně podporuje vlastnost.
Property | |||||
---|---|---|---|---|---|
background-blend-mode | 35.0 | 79.0 | 30.0 | 7.1 | 22.0 |
Syntaxe CSS
background-blend-mode: normal|multiply|screen|overlay|darken|lighten|color-dodge|saturation|color|luminosity;
Hodnoty vlastností
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 |
Další příklady
Příklad
Určete režim prolnutí na "násobení":
div {
width: 400px;
height:
400px;
background-repeat: no-repeat, repeat;
background-image: url("img_tree.gif"), url("paper.gif");
background-blend-mode: multiply;
}
Příklad
Určete režim prolnutí na „obrazovka“:
div {
width: 400px;
height:
400px;
background-repeat: no-repeat, repeat;
background-image: url("img_tree.gif"), url("paper.gif");
background-blend-mode: screen;
}
Příklad
Určete režim prolnutí, aby byl „překryvný“:
div {
width: 400px;
height:
400px;
background-repeat: no-repeat, repeat;
background-image: url("img_tree.gif"), url("paper.gif");
background-blend-mode: overlay;
}
Příklad
Určete režim prolnutí, aby byl „tmavší“:
div {
width: 400px;
height:
400px;
background-repeat: no-repeat, repeat;
background-image: url("img_tree.gif"), url("paper.gif");
background-blend-mode: darken;
}
Příklad
Určete režim prolnutí na "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;
}
Příklad
Určete režim prolnutí na "sytost":
div {
width: 400px;
height:
400px;
background-repeat: no-repeat, repeat;
background-image: url("img_tree.gif"), url("paper.gif");
background-blend-mode: saturation;
}
Příklad
Určete režim prolnutí, aby byl „barevný“:
div {
width: 400px;
height:
400px;
background-repeat: no-repeat, repeat;
background-image: url("img_tree.gif"), url("paper.gif");
background-blend-mode: color;
}
Příklad
Určete režim prolnutí na „svítivost“:
div {
width: 400px;
height:
400px;
background-repeat: no-repeat, repeat;
background-image: url("img_tree.gif"), url("paper.gif");
background-blend-mode: luminosity;
}
Příklad
Určete režim prolnutí jako „normální“:
div {
width: 400px;
height:
400px;
background-repeat: no-repeat, repeat;
background-image: url("img_tree.gif"), url("paper.gif");
background-blend-mode: normal;
}
Související stránky
CSS tutoriál: CSS pozadí