Funktionen linear-gradient
Funktionen linear-gradient definerer en lineær
gradient. Anvendes til egenskaber, der
definerer baggrundsbillede: background,
background-image
eller billede på ramme: border-image,
background-image-source.
Syntaks
selektor {
background: linear-gradient([vinkel eller retning], farve1 størrelse1, farve2 størrelse2...);
}
Værdier
| Værdi | Beskrivelse |
|---|---|
| retning |
Definerer en specifik retning for gradienten i enhver enhed for vinkler
eller med nøgleordene top, left, right, bottom
eller deres kombination: top left, top right og så videre.
Rækkefølgen af ord er ikke vigtig: man kan skrive top left og left top,
der er ingen forskel. Parameteren er valgfri: hvis den ikke skrives, vil gradienten
gå fra top til bund (som ved to top). Foran retningen sættes ordet to.
|
| vinkel | Vinkel i enhver enhed for vinkler. Kan være positiv eller negativ. Parameteren er valgfri. Samtidigt kan der angives enten vinkel eller retning (eller ingenting). |
| farve1 | Startfarve for gradienten i enhver enhed for farve. |
| farve2 | Slutfarve for gradienten i enhver enhed for farve. |
| størrelse | Definerer udstrækningen af en bestemt farve i gradienten i enhver enhed for størrelse. |
Eksempel . Den enkleste variant
Syntaks:
selektor {
background: linear-gradient(startfarve, slutfarve);
}
Lad os se på et eksempel:
<div id="elem"></div>
#elem {
background: linear-gradient(black, red);
width: 200px;
height: 200px;
}
:
Eksempel . Tilføjer vinkel
Syntaks:
selektor {
background: linear-gradient(vinkel, startfarve, slutfarve);
}
Lad os se på et eksempel:
<div id="elem"></div>
#elem {
background: linear-gradient(45deg, black, red);
width: 200px;
height: 200px;
}
:
Eksempel . Tilføjer retning
I stedet for vinkel kan der tilføjes retning
top, left, right, bottom
eller deres kombination: top left, top right
Foran retningen sættes ordet to.
Syntaks:
selektor {
background: linear-gradient(retning, startfarve, slutfarve);
}
Lad os se på et eksempel:
<div id="elem"></div>
#elem {
background: linear-gradient(to left, black, red);
width: 200px;
height: 200px;
}
:
Eksempel . Tilføjer retning
Lad os angive en anden retning:
<div id="elem"></div>
#elem {
background: linear-gradient(to top left, black, red);
width: 200px;
height: 200px;
}
:
Eksempel . Tilføjer størrelse
Syntaks:
selektor {
background: linear-gradient(farve1 størrelse1, farve2 størrelse2);
}
I det næste eksempel vil opførselen være følgende:
ren rød farve vil være fra 0px til
30px, fra 30px til 50px
vil der være en gradient fra rød til blå, og
fra 50px og til slut - ren blå:
<div id="elem"></div>
#elem {
background: linear-gradient(red 30px, blue 50px);
width: 200px;
height: 200px;
}
:
Eksempel . Tilføjer mere end 2 farver
Syntaks:
selektor {
background: linear-gradient(farve1 størrelse1, farve2 størrelse2, farve3 størrelse3...);
}
I det næste eksempel vil opførselen være følgende:
ren rød farve vil være fra 0px til
30px, fra 30px til 50px
vil der være en gradient fra rød til blå, og
fra 50px til 70px - en gradient fra blå
til grøn, og efter 70px - ren grøn:
<div id="elem"></div>
#elem {
background: linear-gradient(red 30px, blue 50px, green 70px);
width: 200px;
height: 200px;
}
:
Eksempel . Skarpe overgange
I det næste eksempel vil opførselen være følgende:
ren rød farve vil være fra 0px til
30px, ren blå - fra 30px
til 60px, ren grøn - efter 60px
(red 0px kan også udelades):
<div id="elem"></div>
#elem {
background: linear-gradient(red 0px, red 30px, blue 30px, blue 60px, green 60px);
width: 200px;
height: 200px;
}
:
Eksempel . Størrelser kan også angives i procenter
I det næste eksempel vil opførselen være følgende:
ren rød farve vil være fra 0% til
30%, ren blå - fra 30%
til 60%, ren grøn - efter 60%
(red 0% kan også udelades):
<div id="elem"></div>
#elem {
background: linear-gradient(red 0%, red 30%, blue 30%, blue 60%, green 60%);
width: 200px;
height: 200px;
}
:
Eksempel . Kombination med background-size
I det næste eksempel vil opførselen være følgende:
ren rød farve vil være fra 0px til
30px, ren blå - fra 30px
til 60px, hvor alt dette vil gentages
i stykker på 60px (på grund af background-size:
60px;):
<div id="elem"></div>
#elem {
background: linear-gradient(to right, red 30px, blue 30px, blue 60px);
background-size: 60px 60px;
width: 200px;
height: 200px;
}
:
Se også
-
funktionen
radial-gradient,
som skaber en radial gradient -
funktionen
repeating-linear-gradient,
som skaber en gentaget lineær gradient -
funktionen
repeating-radial-gradient,
som skaber en gentaget radial gradient
