CSS linear-gradient() -funktio

Edellinen sivu CSS light-dark() funktio
Seuraava sivu CSS log() funktio
Palaa ylös CSS funktioviittausopas

Määrittely ja käyttö

CSS linear-gradient() Funktiota käytetään luomaan taustagradientti.

Lisätäksesi lineaarisen gradientin, on määriteltävä vähintään kaksi väritikettiä. Väritiketti on väri, jonka välillä haluat saavuttaa pehmeän siirtymän. Voit myös määrittää lähtö- ja suunnan (tai kulman) sekä gradientin vaikutuksen.

Lineaarisen gradientin esimerkki:

Esimerkki

Esimerkki 1

Tämä lineaarinen gradientti alkaa ylhäältä. Se siirtyy punaisesta keltaiseen ja sitten siniseen:

#grad {
  background-image: lineaarinen gradientti (punainen, keltainen, sininen);
}

Kokeile itse

Esimerkki 2

Yksi lineaarinen gradientti, joka alkaa vasemmalta. Se siirtyy punaisesta siniseen:

#grad {
  background-image: lineaarinen gradientti (oikealle, punainen, sininen);
}

Kokeile itse

Esimerkki 3

Yksi lineaarinen gradientti, joka alkaa vasemmalta ylös ja jatkuu oikealle alas:

#grad {
  background-image: lineaarinen gradientti (vasen ylös, oikealle alas, punainen, sininen);
}

Kokeile itse

Esimerkki 4

Yksi määritellyllä kulmalla oleva lineaarinen gradientti:

#grad {
  background-image: lineaarinen gradientti (180°, punainen, sininen);
}

Kokeile itse

Esimerkki 5

Yksi sisältää useita väritikkejä lineaarinen gradientti:

#grad {
  background-image: lineaarinen gradientti (oikealle, punainen, oranssi, keltainen, vihreä, sininen, indigo, violetti);
}

Kokeile itse

Esimerkki 6

Yksi kahden värimerkkiä sisältävä suoraviivainen gradientti:

#grad {
  background: linear-gradient(
    to right,
    red 17%,
    orange 17% 34%,
    yellow 34% 51%,
    green 51% 68%,
    blue 68% 84%,
    indigo 84%
  );
}

Kokeile itse

Esimerkki 7

Yksi läpinäkyvä suoraviivainen gradientti:

#grad {
  background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}

Kokeile itse

CSS syntaksi

linear-gradient(side-or-corner, angle, color-stop1, color-stop2, ...);

arvo	kuvaus
side-or-corner	Valinnainen. Gradientin lähtökohta. Aloita avainsanalla 'to', jonka jälkeen enintään kaksi muuta avainsanaa: left tai right top tai bottom Oletusarvo on to bottom（alas）.
angle	Valinnainen. Gradientin suunta-aste: 0deg on: to top（ylös） 180deg on: to bottom（alas） 270deg on: to left（vasemmalle） 90deg on: to right（oikealle）
color-stop1, color-stop2,...	Välttämätön. Värimerkki on väri, jonka välillä haluat toteuttaa pehmeän siirtymän. Arvo koostuu yhdestä värimerkistä, jonka jälkeen on valinnainen yksi tai kaksi värimerkkiä (0%:sta 100%:iin asti oleva prosenttiosuus tai pituus gradientti-akselin suunnassa).

arvo

kuvaus

side-or-corner

Valinnainen. Gradientin lähtökohta. Aloita avainsanalla 'to', jonka jälkeen enintään kaksi muuta avainsanaa:

left tai right
top tai bottom

Oletusarvo on to bottom（alas）.

angle

Valinnainen. Gradientin suunta-aste:

0deg on: to top（ylös）
180deg on: to bottom（alas）
270deg on: to left（vasemmalle）
90deg on: to right（oikealle）

color-stop1, color-stop2,...

Välttämätön. Värimerkki on väri, jonka välillä haluat toteuttaa pehmeän siirtymän.

Arvo koostuu yhdestä värimerkistä, jonka jälkeen on valinnainen yksi tai kaksi värimerkkiä (0%:sta 100%:iin asti oleva prosenttiosuus tai pituus gradientti-akselin suunnassa).