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

cssselektor {
  background: linear-gradient([vinkel eller retning], farve1 størrelse1, farve2 størrelse2...);
}

Værdier

Eksempel . Den enkleste variant

Syntaks:

cssselektor {
  background: linear-gradient(startfarve, slutfarve);
}

Lad os se på et eksempel:

html<div id="elem"></div>

css#elem {
  background: linear-gradient(black, red);
  width: 200px;
  height: 200px;
}

Результат:

Eksempel . Tilføjer vinkel

Syntaks:

cssselektor {
  background: linear-gradient(vinkel, startfarve, slutfarve);
}

Lad os se på et eksempel:

html<div id="elem"></div>

css#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:

cssselektor {
  background: linear-gradient(retning, startfarve, slutfarve);
}

Lad os se på et eksempel:

html<div id="elem"></div>

css#elem {
  background: linear-gradient(to left, black, red);
  width: 200px;
  height: 200px;
}

Результат:

Eksempel . Tilføjer retning

Lad os angive en anden retning:

html<div id="elem"></div>

css#elem {
  background: linear-gradient(to top left, black, red);
  width: 200px;
  height: 200px;
}

Результат:

Eksempel . Tilføjer størrelse

Syntaks:

cssselektor {
  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å:

html<div id="elem"></div>

css#elem {
  background: linear-gradient(red 30px, blue 50px);
  width: 200px;
  height: 200px;
}

Результат:

Eksempel . Tilføjer mere end 2 farver

Syntaks:

cssselektor {
  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:

html<div id="elem"></div>

css#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):

html<div id="elem"></div>

css#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):

html<div id="elem"></div>

css#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;):

html<div id="elem"></div>

css#elem {
  background: linear-gradient(to right, red 30px, blue 30px, blue 60px);
  background-size: 60px 60px;
  width: 200px;
  height: 200px;
}

Результат:

Se også