⌘K

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

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

cssselektor {
  background: linear-gradient(startfärg, slutfärg);
}

Låt oss titta på ett exempel: 

html<div id="elem"></div>
css#elem {
  background: linear-gradient(black, red);
  width: 200px;
  height: 200px;
}

Результат:

Exempel . Lägger till en vinkel

Syntax: 

cssselektor {
  background: linear-gradient(vinkel, startfärg, slutfärg);
}

Låt oss titta på ett exempel: 

html<div id="elem"></div>
css#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: 

cssselektor {
  background: linear-gradient(riktning, startfärg, slutfärg);
}

Låt oss titta på ett exempel: 

html<div id="elem"></div>
css#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: 

html<div id="elem"></div>
css#elem {
  background: linear-gradient(to top left, black, red);
  width: 200px;
  height: 200px;
}

Результат:

Exempel . Lägger till storlek

Syntax: 

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

html<div id="elem"></div>
css#elem {
  background: linear-gradient(red 30px, blue 50px);
  width: 200px;
  height: 200px;
}

Результат:

Exempel . Lägger till fler än 2 färger

Syntax: 

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

html<div id="elem"></div>
css#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): 

html<div id="elem"></div>
css#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): 

html<div id="elem"></div>
css#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;): 

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 även

BackEgenskapen visibilityNextFunktionen radial-gradient