CSS värikysymykset

Tämä luku selittää transparent、currentcolor ja inherit Avainsana.

transparent-avainsana

transparent Avainsanaa käytetään tekemään väri läpinäkyväksi. Tämä käytetään yleensä elementin läpinäkyvän taustavärin asettamiseen.

Esimerkki

Tässä, <div>-elementin taustaväri on täysin läpinäkyvä ja taustakuvaa näkyy:

body {
  background-image: url("paper.gif");
}
div {
  background-color: transparent;
}

Kokeile itse

Huomioitavaa:transparent Avainsana on samanarvoinen rgba(0,0,0,0)RGBA-väriarvo on RGB-väriarvon laajennus, joka sisältää alpha-kanavan – se määrittää väriä kirkkauden. CSS RGB Lukuja ja CSS värit Luku.

currentcolor-avainsana

currentcolor Avainsana muistuttaa muuttujaa, joka tallentaa elementin color-ominaisuuden nykyisen arvon.

Jos haluat, että tietty väri pysyy johdonmukaisena elementissä tai sivulla, tämä avainsana on erittäin hyödyllinen.

Esimerkki

Tässä esimerkissä, <div>-elementin reunaväri on sininen, koska <div>-elementin tekstin väri on sininen:

div {
  color: blue;
  border: 10px solid currentcolor;
}

Kokeile itse

Esimerkki

Tässä esimerkissä, <div>-elementin taustaväri asetetaan body-elementin nykyiseen väriarvoon:

body {
  color: purple;
}
div {
  background-color: currentcolor;
}

Kokeile itse

Esimerkki

Tässä esimerkissä, <div>:n reunan väri ja varjo väri asetetaan body-elementin nykyiseen väriarvoon:

body {
 color: green;
}
div {
  box-shadow: 0px 0px 15px currentcolor;
  border: 5px solid currentcolor;
}

Kokeile itse

inherit-avainsana

inherit Avainsana määrittää, että ominaisuuden arvo otetaan isältä elementistä.

inherit Avainsanat voidaan käyttää mihin tahansa CSS-ominaisuuteen ja mihin tahansa HTML-elementtiin.

Esimerkki

Tässä esimerkissä, <span>:n reunan asetukset otetaan isältä elementistä:

div {
  border: 2px solid red;
}
span {
  border: inherit;
}

Kokeile itse