CSS: n taustaväri-ominaisuus käyttää kiinteitä värejä elementin taustana. Tässä on esimerkki:
html ( background-color: #82a43a; )Edellä käytettyä esimerkkiä ( #82a43a) kutsutaan heksakoodiksi, ja se on yksi monista tavoista, joilla CSS: n on edustettava yhtä väriä. On olemassa useita tapoja löytää oikeat heksakoodit. Jokainen, joka on käyttänyt suunnittelutyökalua, on nähnyt tämän kaltaisen värivalitsimen:
Hex-koodit ovat yksi tapa ilmoittaa väri CSS: ssä. On myös joukko nimiä, joita voit käyttää, esimerkiksi:
.page-wrap ( background: white; ) footer ( background: black; ) .almonds ( background: blanchedAlmond; )Nämä värit eivät ole kovin joustavia, mutta ne voivat olla käteviä ripaus. Ne on helpompi muistaa kuin heksakoodit, ja niitä on paljon.
Toinen tapa ilmoittaa väri on käyttää RGB, RGBa, HSL tai HSLa:
#page-wrap ( background: rgba(0, 0, 0, 0.8); /* 80% Black */ ) .widget ( background: hsla(170, 50%, 45%, 1); )Toisin kuin heksakoodit, nämä arvot mahdollistavat läpinäkyvyyden (alfa), mikä voi olla erittäin hyödyllistä. Lisätietoja RGBa: sta tai HSLa: sta.
Demo
Katso CSS-Tricksin kynän taustaväri (@ css-tricks) CodePenistä.
Liittyvät
- tausta-kiinnitys
- taustaleike
- taustakuva
- tausta-alkuperä
- taustan sijainti
- tausta-toisto
- taustakoko
Lisää resursseja
- CSS3-tekniset tiedot
- MDN
Selaimen tuki
Hex-koodit ja useimmat värinimet toimivat kaikkialla. RGBa: lla ja HSLa: lla on omat selaintukisarjansa: RGBa ja HSLa.
| Kromi | Safari | Firefox | Ooppera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Toimii | Toimii | Toimii | Toimii | Toimii | Toimii | Toimii |