linear-gradient funksie
Die funksie linear-gradient spesifiseer 'n lineêre
gradiënt. Word toegepas op eienskappe wat
'n agtergrondbeeld spesifiseer: background,
background-image
of 'n randbeeld: border-image,
background-image-source.
Sintaksis
selektor {
background: linear-gradient([hoek of rigting], kleur1 grootte1, kleur2 grootte2...);
}
Waardes
| Waarde | Beskrywing |
|---|---|
| rigting |
Spesifiseer 'n spesifieke rigting vir die gradiënt in enige eenhede vir hoeke
of met sleutelwoorde top, left, right, bottom
of hul kombinasie: top left, top right ensovoorts.
Die volgorde van woorde maak nie saak nie: jy kan top left en left top skryf,
geen verskil nie. Die parameter is opsioneel: as dit nie gespesifiseer word nie, sal die gradiënt
van bo na onder loop (soos met to top). Die woord to word voor die rigting geplaas.
|
| hoek | 'n Hoek in enige eenhede vir hoeke. Kan positief of negatief wees. Die parameter is opsioneel. Slegs óf 'n hoek, óf 'n rigting (of niks) kan gespesifiseer word. |
| kleur1 | Begin kleur van die gradiënt in enige eenhede vir kleur. |
| kleur2 | Eind kleur van die gradiënt in enige eenhede vir kleur. |
| grootte | Spesifiseer die lengte van 'n spesifieke kleur van die gradiënt in enige eenhede vir grootte. |
Voorbeeld . Die mees basiese opsie
Sintaksis:
selektor {
background: linear-gradient(begin kleur, eind kleur);
}
Kom ons kyk na 'n voorbeeld:
<div id="elem"></div>
#elem {
background: linear-gradient(black, red);
width: 200px;
height: 200px;
}
:
Voorbeeld . Voeg 'n hoek by
Sintaksis:
selektor {
background: linear-gradient(hoek, begin kleur, eind kleur);
}
Kom ons kyk na 'n voorbeeld:
<div id="elem"></div>
#elem {
background: linear-gradient(45deg, black, red);
width: 200px;
height: 200px;
}
:
Voorbeeld . Voeg 'n rigting by
In plaas van 'n hoek kan jy 'n rigting byvoeg
top, left, right, bottom
of hul kombinasie: top left, top right
Die woord to word voor die rigting geplaas.
Sintaksis:
selektor {
background: linear-gradient(rigting, begin kleur, eind kleur);
}
Kom ons kyk na 'n voorbeeld:
<div id="elem"></div>
#elem {
background: linear-gradient(to left, black, red);
width: 200px;
height: 200px;
}
:
Voorbeeld . Voeg 'n rigting by
Laat ons 'n ander rigting spesifiseer:
<div id="elem"></div>
#elem {
background: linear-gradient(to top left, black, red);
width: 200px;
height: 200px;
}
:
Voorbeeld . Voeg 'n grootte by
Sintaksis:
selektor {
background: linear-gradient(kleur1 grootte1, kleur2 grootte2);
}
In die volgende voorbeeld sal die gedrag soos volg wees:
suiver rooi kleur sal van 0px tot
30px wees, van 30px tot 50px
sal daar 'n gradiënt van rooi na blou wees, en
van 50px en tot die einde - suiver blou:
<div id="elem"></div>
#elem {
background: linear-gradient(red 30px, blue 50px);
width: 200px;
height: 200px;
}
:
Voorbeeld . Voeg meer as 2 kleure by
Sintaksis:
selektor {
background: linear-gradient(kleur1 grootte1, kleur2 grootte2, kleur3 grootte3...);
}
In die volgende voorbeeld sal die gedrag soos volg wees:
suiver rooi kleur sal van 0px tot
30px wees, van 30px tot 50px
sal daar 'n gradiënt van rooi na blou wees, en
van 50px en tot 70px - gradiënt van blou
na groen, en na 70px - suiver groen:
<div id="elem"></div>
#elem {
background: linear-gradient(red 30px, blue 50px, green 70px);
width: 200px;
height: 200px;
}
:
Voorbeeld . Skerp oorgange
In die volgende voorbeeld sal die gedrag soos volg wees:
suiver rooi kleur sal van 0px tot
30px wees, suiver blou - van 30px
tot 60px, suiver groen - na 60px
(red 0px kan uitgelaat word):
<div id="elem"></div>
#elem {
background: linear-gradient(red 0px, red 30px, blue 30px, blue 60px, green 60px);
width: 200px;
height: 200px;
}
:
Voorbeeld . Groottes kan ook in persentasies gespesifiseer word
In die volgende voorbeeld sal die gedrag soos volg wees:
suiver rooi kleur sal van 0% tot
30% wees, suiver blou - van 30%
tot 60%, suiver groen - na 60%
(red 0% kan uitgelaat word):
<div id="elem"></div>
#elem {
background: linear-gradient(red 0%, red 30%, blue 30%, blue 60%, green 60%);
width: 200px;
height: 200px;
}
:
Voorbeeld . Kombinasie met background-size
In die volgende voorbeeld sal die gedrag soos volg wees:
suiver rooi kleur sal van 0px tot
30px wees, suiver blou - van 30px
tot 60px, terwyl dit alles in stukke sal herhaal
van 60px elk (as gevolg van 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;
}
:
Sien ook
-
die
radial-gradientfunksie,
wat 'n radiale gradiënt skep -
die
repeating-linear-gradientfunksie,
wat 'n herhalende lineêre gradiënt skep -
die
repeating-radial-gradientfunksie,
wat 'n herhalende radiale gradiënt skep
