A linear-gradient függvény

A linear-gradient függvény lineáris gradienseket határoz meg. Olyan tulajdonságokhoz használjuk, amelyek a háttérképet határozzák meg: background, background-image vagy a szegély képét: border-image, background-image-source.

Szintaxis

cssszelektor {
  background: linear-gradient([szög vagy irány], szín1 méret1, szín2 méret2...);
}

Értékek

Példa . A legegyszerűbb változat

Szintaxis:

cssszelektor {
  background: linear-gradient(kezdő szín, záró szín);
}

Nézzük meg egy példán:

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

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

Результат:

Példa . Szög hozzáadása

Szintaxis:

cssszelektor {
  background: linear-gradient(szög, kezdő szín, záró szín);
}

Nézzük meg egy példán:

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

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

Результат:

Példa . Irány hozzáadása

A szög helyett hozzáadhatunk irányt is: top, left, right, bottom vagy ezek kombinációját: top left, top right Az irány elé a to szót írjuk.

Szintaxis:

cssszelektor {
  background: linear-gradient(irány, kezdő szín, záró szín);
}

Nézzük meg egy példán:

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

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

Результат:

Példa . Másik irány megadása

Adjunk meg másik irányt:

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

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

Результат:

Példa . Méret hozzáadása

Szintaxis:

cssszelektor {
  background: linear-gradient(szín1 méret1, szín2 méret2);
}

A következő példában a viselkedés a következő lesz: tiszta piros szín 0px-tól 30px-ig, 30px-tól 50px-ig pirosból kékbe gradienst, majd 50px-től a végéig - tiszta kék:

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

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

Результат:

Példa . Több mint 2 szín hozzáadása

Szintaxis:

cssszelektor {
  background: linear-gradient(szín1 méret1, szín2 méret2, szín3 méret3...);
}

A következő példában a viselkedés a következő lesz: tiszta piros szín 0px-tól 30px-ig, 30px-tól 50px-ig pirosból kékbe gradienst, majd 50px-től 70px-ig - kéket zöldbe gradienst, majd 70px után - tiszta zöld:

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

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

Результат:

Példa . Éles átmenetek

A következő példában a viselkedés a következő lesz: tiszta piros szín 0px-tól 30px-ig, tiszta kék - 30px-től 60px-ig, tiszta zöld - 60px után (a red 0px nem kötelező):

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

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

Результат:

Példa . A méret megadható százalékban is

A következő példában a viselkedés a következő lesz: tiszta piros szín 0%-tól 30%-ig, tiszta kék - 30%-től 60%-ig, tiszta zöld - 60% után (a red 0% nem kötelező):

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

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

Результат:

Példa . Kombinálás background-size-szal

A következő példában a viselkedés a következő lesz: tiszta piros szín 0px-tól 30px-ig, tiszta kék - 30px-től 60px-ig, miközben mindez ismétlődni fog 60px-es darabokban (a background-size: 60px; miatt):

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;
}

Результат:

Lásd még