CSS värit

CSS-tuki Yli 140 väriäja kymmenkantaperäisillä arvoilla, RGB-arvoilla, RGBA-arvoilla, HSL-arvoilla, HSLA-arvoilla ja läpinäkyvyydellä.

RGBA-väri

RGBA-väriarvo on RGB-väriarvon laajennus, jossa on alpha-kanava - tämä kanava määrittää väriä epä läpinäkyväksi.

RGBA-väriarvo määritellään seuraavasti: rgba(punainen, vihreä, sininen, alpha)。 alpha Parametrit ovat lukuja, jotka sijaitsevat välillä 0.0 (täysin läpinäkyvä) ja 1.0 (täysin peittävä).

rgba(255, 0, 0, 0.2);
rgba(255, 0, 0, 0.4);
rgba(255, 0, 0, 0.6);
rgba(255, 0, 0, 0.8);

Alla oleva esimerkki määrittelee erilaisia RGBA-värejä:

Esimerkki

#p1 {background-color: rgba(255, 0, 0, 0.3);}  /* Epä läpinäkyvä punainen */
#p2 {background-color: rgba(0, 255, 0, 0.3);}  /* Epä läpinäkyvä vihreä */
#p3 {background-color: rgba(0, 0, 255, 0.3);}  /* Epä läpinäkyvä sininen */

Kokeile itse

HSL-väri

HSL tarkoittaa väriä, saturaatiota ja kirkkautta (Hue, Saturation ja Lightness).

HSL-väriarvo määritellään seuraavasti: hsl(huone, saturaatio, kirkkaus).

Väri on väripyörän asteet (0-360):

  • 0 (tai 360) on punainen
  • 120 on vihreä
  • 240 on sininen

Saturaatio on prosenttiosuhde: 100% on täysvärinen.

Kirkkaus on prosenttiosuhde: 0% on tumma (musta), ja 100% on valkoinen.

hsl(0, 100%, 30%);
hsl(0, 100%, 50%);
hsl(0, 100%, 70%);
hsl(0, 100%, 90%);

Alla oleva esimerkki määrittää erilaisia HSL-värejä:

Esimerkki

#p1 {background-color: hsl(120, 100%, 50%);}  /* Vihreä */
#p2 {background-color: hsl(120, 100%, 75%);}  /* Pehmeä vihreä */
#p3 {background-color: hsl(120, 100%, 25%);}  /* Kova vihreä */
#p4 {background-color: hsl(120, 60%, 70%);}   /* Pehmeä vihreä */

Kokeile itse

HSLA-väri

HSLA-väriarvo on HSL-väriarvon laajennus, joka sisältää Alpha-kanavan - se määrittää väriäsiiven läpinäkyvyyden.

HSLA-väriarvoja määrittävät seuraavat parametrit: hsla(huone, kirkkaus, heijastus, alpha)，jossa alpha-parametri määrittää läpinäkyvyyden. Alpha-parametri on luku välillä 0.0 (täysin läpinäkyvä) ja 1.0 (täysin peittävä).

hsla(0, 100%, 30%, 0.3);
hsla(0, 100%, 50%, 0.3);
hsla(0, 100%, 70%, 0.3);
hsla(0, 100%, 90%, 0.3);

Alla oleva esimerkki määrittää erilaisia HSLA-värejä:

Esimerkki

#p1 {background-color: hsla(120, 100%, 50%, 0.3);}  /* Vihreä läpinäkyvyydellä */
#p2 {background-color: hsla(120, 100%, 75%, 0.3);}  /* Pehmeä vihreä läpinäkyvyydellä */
#p3 {background-color: hsla(120, 100%, 25%, 0.3);}  /* Kova vihreä läpinäkyvyydellä */
#p4 {background-color: hsla(120, 60%, 70%, 0.3);}   /* Pehmeä vihreä läpinäkyvyydellä */

Kokeile itse

Läpinäkyvyys

CSS opacity Ominaisuus asettaa koko elementin läpinäkyvyyden (mukaan lukien taustaväri ja teksti) läpinäkyväksi/tuntemattomaksi.

opacity Ominaisuuden arvon täytyy olla luku välillä 0.0 (täysin läpinäkyvä) ja 1.0 (täysin peittävä).

rgb(255, 0, 0); opacity:0.2;
rgb(255, 0, 0); opacity:0.4;
rgb(255, 0, 0); opacity:0.6;
rgb(255, 0, 0); opacity:0.8;

Huomaa, että yllä oleva teksti on myös läpinäkyvä/epäläpinäinen!

Seuraava esimerkki näyttää eri elementtien epäläpinäisyyden:

Esimerkki

#p1 {background-color:rgb(255,0,0);opacity:0.6;}  /* Epäläpinäinen punainen */
#p2 {background-color:rgb(0,255,0);opacity:0.6;}  /* Epäläpinäinen vihreä */
#p3 {background-color:rgb(0,0,255);opacity:0.6;}  /* Epäläpinäinen sininen */

Kokeile itse