Funktionen linear-gradient
Funktionen linear-gradient definierar en linjär
gradient. Används för egenskaper som
ställer in en bakgrundsbild: background,
background-image
eller en kantbild: border-image,
background-image-source.
Syntax
selektor {
background: linear-gradient([vinkel eller riktning], färg1 storlek1, färg2 storlek2...);
}
Värden
| Värde | Beskrivning |
|---|---|
| riktning |
Anger en specifik riktning för gradienten i valfri enhet för vinklar
eller med nyckelorden top, left, right, bottom
eller deras kombination: top left, top right och så vidare.
Ordningen på orden spelar ingen roll: man kan skriva top left och left top,
det är ingen skillnad. Parametern är valfri: om den inte anges kommer gradienten att
gå från topp till botten (som med to top). Före riktningen sätts ordet to.
|
| vinkel | Vinkel i valfri enhet för vinklar. Kan vara positiv eller negativ. Parametern är valfri. Antingen kan en vinkel eller en riktning anges (eller ingenting alls). |
| färg1 | Startfärg för gradienten i valfri enhet för färg. |
| färg2 | Slutfärg för gradienten i valfri enhet för färg. |
| storlek | Anger utsträckningen för en specifik färg i gradienten i valfri enhet för storlek. |
Exempel . Enklaste varianten
Syntax:
selektor {
background: linear-gradient(startfärg, slutfärg);
}
Låt oss titta på ett exempel:
<div id="elem"></div>
#elem {
background: linear-gradient(black, red);
width: 200px;
height: 200px;
}
:
Exempel . Lägger till en vinkel
Syntax:
selektor {
background: linear-gradient(vinkel, startfärg, slutfärg);
}
Låt oss titta på ett exempel:
<div id="elem"></div>
#elem {
background: linear-gradient(45deg, black, red);
width: 200px;
height: 200px;
}
:
Exempel . Lägger till en riktning
Istället för en vinkel kan du lägga till en riktning
top, left, right, bottom
eller deras kombination: top left, top right
Före riktningen sätts ordet to.
Syntax:
selektor {
background: linear-gradient(riktning, startfärg, slutfärg);
}
Låt oss titta på ett exempel:
<div id="elem"></div>
#elem {
background: linear-gradient(to left, black, red);
width: 200px;
height: 200px;
}
:
Exempel . Lägger till en riktning
Låt oss ange en annan riktning:
<div id="elem"></div>
#elem {
background: linear-gradient(to top left, black, red);
width: 200px;
height: 200px;
}
:
Exempel . Lägger till storlek
Syntax:
selektor {
background: linear-gradient(färg1 storlek1, färg2 storlek2);
}
I nästa exempel kommer beteendet att vara följande:
ren röd färg kommer att vara från 0px till
30px, från 30px till 50px
kommer det att vara en gradient från röd till blå, och
från 50px och till slutet - ren blå:
<div id="elem"></div>
#elem {
background: linear-gradient(red 30px, blue 50px);
width: 200px;
height: 200px;
}
:
Exempel . Lägger till fler än 2 färger
Syntax:
selektor {
background: linear-gradient(färg1 storlek1, färg2 storlek2, färg3 storlek3...);
}
I nästa exempel kommer beteendet att vara följande:
ren röd färg kommer att vara från 0px till
30px, från 30px till 50px
kommer det att vara en gradient från röd till blå, och
från 50px till 70px - en gradient från blå
till grön, och efter 70px - ren grön:
<div id="elem"></div>
#elem {
background: linear-gradient(red 30px, blue 50px, green 70px);
width: 200px;
height: 200px;
}
:
Exempel . Skarpa övergångar
I nästa exempel kommer beteendet att vara följande:
ren röd färg kommer att vara från 0px till
30px, ren blå - från 30px
till 60px, ren grön - efter 60px
(red 0px behöver inte skrivas):
<div id="elem"></div>
#elem {
background: linear-gradient(red 0px, red 30px, blue 30px, blue 60px, green 60px);
width: 200px;
height: 200px;
}
:
Exempel . Storlekar kan också anges i procent
I nästa exempel kommer beteendet att vara följande:
ren röd färg kommer att vara från 0% till
30%, ren blå - från 30%
till 60%, ren grön - efter 60%
(red 0% behöver inte skrivas):
<div id="elem"></div>
#elem {
background: linear-gradient(red 0%, red 30%, blue 30%, blue 60%, green 60%);
width: 200px;
height: 200px;
}
:
Exempel . Kombination med background-size
I nästa exempel kommer beteendet att vara följande:
ren röd färg kommer att vara från 0px till
30px, ren blå - från 30px
till 60px, samtidigt som allt detta kommer att upprepas
i bitar om 60px (på grund 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 även
-
funktionen
radial-gradient,
som skapar en radiell gradient -
funktionen
repeating-linear-gradient,
som skapar en upprepad linjär gradient -
funktionen
repeating-radial-gradient,
som skapar en upprepad radiell gradient
