CSS color() funktio

määrittely ja käyttö

CSS: color() Funktio mahdollistaa väriavaruuden määrittämisen tiettyyn väriavaruuteen.

esimerkki

esimerkki 1

Määritä taustaväri display-p3 väriavaruudessa (läpinäkyvyys 0.3):

div {
  padding: 15px;
  border: 2px solid black;
  background-color: color(display-p3 0.6 0.6 0 / .3);
}

Kokeile itse

esimerkki 2

Käytä suhteellista arvo syntaksia:

div {
  padding: 15px;
  border: 2px solid black;
  background-color: color(from blue srgb r g b / 0.4);
}

Kokeile itse

CSS syntaksi

absoluuttinen arvo syntaksi

color(colorspace c1 c2 c3 / A)
arvo kuvaus
colorspace

Välttämätön. Määrittelee yhden määritellyistä väriavaruuksista:

  • srgb
  • srgb-linear
  • display-p3
  • a98-rgb
  • prophoto-rgb
  • rec2020
  • xyz
  • xyz-d50
  • xyz-d65
c1 c2 c3

Välttämätön. Merkitsee väriavaruuden komponenttiarvoa.

Jokainen arvo voidaan kirjoittaa numerona (0-1 välillä), prosenttina (0% - 100% välillä) tai avainsanana none.
/ A

Valinnainen. Merkitsee värikanavan läpinäkyvyysarvoa (0 tarkoittaa täysin läpinäkyvää, 100 täysin läpinäkyvää ei ole).

Voit käyttää myös nonea (merkitsee läpinäkyvyyden kanavaa ei ole olemassa).

Oletusarvo on 100.

suhteellinen arvo syntaksi

color(from color colorspace c1 c2 c3 / A)
arvo kuvaus
from color

Aloitetaan avainsanalla from, jonka jälkeen seuraa alkuperäisen väriä merkitsevä väriarvo.

Tämä on suhteellisten värien pohjana oleva alkuperäinen väri.
colorspace

Välttämätön. Määrittelee yhden määritellyistä väriavaruuksista:

  • srgb
  • srgb-linear
  • display-p3
  • a98-rgb
  • prophoto-rgb
  • rec2020
  • xyz
  • xyz-d50
  • xyz-d65
c1 c2 c3

Välttämätön. Merkitsee väriavaruuden komponenttiarvoa.

Jokainen arvo voidaan kirjoittaa numerona (0-1 välillä), prosenttina (0% - 100% välillä) tai avainsanana none.
/ A

Valinnainen. Merkitsee värikanavan läpinäkyvyysarvoa (0 tarkoittaa täysin läpinäkyvää, 100 täysin läpinäkyvää ei ole).

Voit käyttää myös nonea (merkitsee läpinäkyvyyden kanavaa ei ole olemassa).

Oletusarvo on 100.

Tekninen yksityiskohta

Versio: CSS Color Module Level 5

Selaimen tuki

Taulukon numerot merkitsevät ensimmäistä selainta, joka tukee tätä toimintoa täysin.

Chrome Edge Firefox Safari Opera
111 111 113 15 97

Tiedot sivusta

Viittaus:CSS värit