Funksjonen linear-gradient
Funksjonen linear-gradient definerer en lineær
gradient. Brukes på egenskaper som
setter bakgrunnsbilde: background,
background-image
eller rammebilde: border-image,
background-image-source.
Syntaks
velger {
background: linear-gradient([vinkel eller retning], farge1 størrelse1, farge2 størrelse2...);
}
Verdier
| Verdi | Beskrivelse |
|---|---|
| retning |
Definerer en spesifikk retning for gradienten i alle vinkelenheter
eller med nøkkelord top, left, right, bottom
eller deres kombinasjon: top left, top right og så videre.
Rekkefølgen på ordene spiller ingen rolle: du kan skrive top left og left top,
det er ingen forskjell. Parameteren er valgfri: hvis den ikke skrives, vil gradienten
gå fra topp til bunn (som med to top). Foran retningen settes ordet to.
|
| vinkel | Vinkel i alle vinkelenheter. Kan være positiv eller negativ. Parameteren er valgfri. Samtidig kan enten vinkel eller retning angis (eller ingenting). |
| farge1 | Startfargen på gradienten i alle fargeenheter. |
| farge2 | Sluttfargen på gradienten i alle fargeenheter. |
| størrelse | Definerer utstrekningen til en bestemt farge i gradienten i alle størrelsesenheter. |
Eksempel . Den enkleste varianten
Syntaks:
velger {
background: linear-gradient(startfarge, sluttfarge);
}
La oss se på et eksempel:
<div id="elem"></div>
#elem {
background: linear-gradient(black, red);
width: 200px;
height: 200px;
}
:
Eksempel . Legger til vinkel
Syntaks:
velger {
background: linear-gradient(vinkel, startfarge, sluttfarge);
}
La oss se på et eksempel:
<div id="elem"></div>
#elem {
background: linear-gradient(45deg, black, red);
width: 200px;
height: 200px;
}
:
Eksempel . Legger til retning
I stedet for vinkel kan du legge til retning
top, left, right, bottom
eller deres kombinasjon: top left, top right
Foran retningen settes ordet to.
Syntaks:
velger {
background: linear-gradient(retning, startfarge, sluttfarge);
}
La oss se på et eksempel:
<div id="elem"></div>
#elem {
background: linear-gradient(to left, black, red);
width: 200px;
height: 200px;
}
:
Eksempel . Legger til retning
La oss angi en annen retning:
<div id="elem"></div>
#elem {
background: linear-gradient(to top left, black, red);
width: 200px;
height: 200px;
}
:
Eksempel . Legger til størrelse
Syntaks:
velger {
background: linear-gradient(farge1 størrelse1, farge2 størrelse2);
}
I det følgende eksemplet vil oppførselen være som følger:
ren rød farge vil være fra 0px til
30px, fra 30px til 50px
vil det være en gradient fra rød til blå, og
fra 50px og til slutten - ren blå:
<div id="elem"></div>
#elem {
background: linear-gradient(red 30px, blue 50px);
width: 200px;
height: 200px;
}
:
Eksempel . Legger til mer enn 2 farger
Syntaks:
velger {
background: linear-gradient(farge1 størrelse1, farge2 størrelse2, farge3 størrelse3...);
}
I det følgende eksemplet vil oppførselen være som følger:
ren rød farge vil være fra 0px til
30px, fra 30px til 50px
vil det være en gradient fra rød til blå, og
fra 50px til 70px - en gradient fra blå
til grønn, og etter 70px - ren grønn:
<div id="elem"></div>
#elem {
background: linear-gradient(red 30px, blue 50px, green 70px);
width: 200px;
height: 200px;
}
:
Eksempel . Skarpe overganger
I det følgende eksemplet vil oppførselen være som følger:
ren rød farge vil være fra 0px til
30px, ren blå - fra 30px
til 60px, ren grønn - etter 60px
(red 0px trenger ikke å skrives):
<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å angis i prosent
I det følgende eksemplet vil oppførselen være som følger:
ren rød farge vil være fra 0% til
30%, ren blå - fra 30%
til 60%, ren grønn - etter 60%
(red 0% trenger ikke å skrives):
<div id="elem"></div>
#elem {
background: linear-gradient(red 0%, red 30%, blue 30%, blue 60%, green 60%);
width: 200px;
height: 200px;
}
:
Eksempel . Kombinasjon med background-size
I det følgende eksemplet vil oppførselen være som følger:
ren rød farge vil være fra 0px til
30px, ren blå - fra 30px
til 60px, samtidig som alt dette vil gjentas
i biter på 60px (på grunn av 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å
-
funksjonen
radial-gradient,
som lager en radiell gradient -
funksjonen
repeating-linear-gradient,
som lager en repeterende lineær gradient -
funksjonen
repeating-radial-gradient,
som lager en repeterende radiell gradient
