CSS tausta
- Edellinen sivu CSS HSL värit
- Seuraava sivu CSS taustakuvat
CSS taustan ominaisuudet määrittävät elementin taustavaikutelman.
Näissä luvuissa opit seuraavista CSS taustan ominaisuuksista:
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
CSS background-color
background-color
Ominaisuus määrittää elementin taustavärin.
Esimerkki
Sivun taustaväri on asetettu seuraavasti:
body { background-color: lightblue; }
CSS:ssä värit määritellään yleensä seuraavilla tavoilla:
- Virkaiset väri nimet - esimerkiksi "red"
- Hex-luvut - esimerkiksi "#ff0000"
- RGB-arvot - esimerkiksi "rgb(255,0,0)"
Tarkista CSS väriarvot,saadaksesi täydellisen listan mahdollisista väriarvoista.
Muut elementit
Voit asettaa taustavärin mihin tahansa HTML-elementtiin:
Esimerkki
Tässä, <h1>, <p> ja <div>-elementit saavat eri taustavärin:
h1 { background-color: green; } div { background-color: lightblue; } p { background-color: yellow; }
Läpinäkyvyys / Läpinäkyvyys
läpinäkyvyys-ominaisuus määrittää elementin läpinäkyvyyden/läpinäkyvyyden. Arvojen välillä on 0.0 - 1.0. Arvojen luku on pienempi, mitä läpinäkyvyyttä enemmän:
Esimerkki
div { background-color: green; läpinäkyvyys: 0.3; }
Huomioitavaa:Käytä läpinäkyvyys
Kun asetat elementin taustan läpinäkyvyyden ominaisuudella, kaikki sen alisivut perivät saman läpinäkyvyyden. Tämä voi tehdä täysin läpinäkyvien elementtien sisällä olevasta tekstistä vaikeasti luettavaa.
RGBA läpinäkyvyyden käyttö
Jos et halua soveltaa läpinäkyvyyttä alisivuille, esimerkiksi yllä olevassa esimerkissä, käytä RGBA Väriarvo. Esimerkiksi alla oleva esimerkki asettaa taustavärin eikä tekstin läpinäkyvyyttä:
tiedostamme CSS värit luvussa oppisit RGB:n käyttämisen väriarvona. RGB-väriarvon lisäksi voit käyttää RGB-väriarvoa alpha kanavat yhdessä käytetään (RGBA) - tämä kanava määrittää väriäsiävyttävyys.
RGBA-väriarvo määritellään: rgba(punainen, vihreä, sininen, alpha)。alpha Parametrit ovat lukuja välillä 0.0 (täysin läpinäkyvä) ja 1.0 (ei läpinäkyvää).
Vinkki:Voit löytää lisää tietoa RGB-väreistä CSS värit Tässä luvussa oppisit lisää RGBA-väreistä.
Esimerkki
div { background: rgba(0, 128, 0, 0.3) /* 30% läpinäkyvyyden vihreä tausta */ }
- Edellinen sivu CSS HSL värit
- Seuraava sivu CSS taustakuvat