Funkce CSS linear-gradient().
Příklad
Tento lineární gradient začíná nahoře. Začíná červeně, přechází do žluté a poté do modré:
#grad {
background-image: linear-gradient(red, yellow, blue);
}
Další příklady „Vyzkoušejte si to sami“ níže.
Definice a použití
Funkce linear-gradient() nastaví jako obrázek pozadí lineární přechod.
Chcete-li vytvořit lineární přechod, musíte definovat alespoň dvě barevné zastávky. Zarážky barev jsou barvy, mezi kterými chcete vykreslit hladké přechody. Můžete také nastavit počáteční bod a směr (nebo úhel) spolu s efektem přechodu.
Příklad lineárního gradientu:
Verze: | CSS3 |
---|
Podpora prohlížeče
Čísla v tabulce určují první verzi prohlížeče, která tuto funkci plně podporuje.
Čísla následovaná -webkit-, -moz- nebo -o- určují první verzi, která pracovala s předponou.
Function | |||||
---|---|---|---|---|---|
linear-gradient() | 26.0 10.0 -webkit- |
10.0 | 16.0 3.6 -moz- |
6.1 5.1 -webkit- |
12.1 11.1 -o- |
Syntaxe CSS
background-image: linear-gradient(direction, color-stop1,
color-stop2, ...);
Value | Description |
---|---|
direction | Defines a starting point and a direction (or an angle) along with the gradient effect. |
color-stop1, color-stop2,... | Color stops are the colors you want to render smooth transitions among. This value consists of a color value, followed by an optional stop position (a percentage between 0% and 100% or a length along the gradient axis). |
Další příklady
Příklad
Lineární gradient, který začíná zleva. Začíná červeně a přechází do modré:
#grad {
background-image: linear-gradient(to right, red , blue);
}
Příklad
Lineární přechod, který začíná vlevo nahoře (a jde vpravo dole):
#grad {
background-image: linear-gradient(to bottom right, red , blue);
}
Příklad
Lineární gradient se zadaným úhlem:
#grad {
background-image: linear-gradient(180deg, red, blue);
}
Příklad
Lineární přechod s více barvami:
#grad {
background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);
}
Příklad
Lineární přechod s průhledností:
#grad {
background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}
Související stránky
CSS tutoriál: CSS přechody