CSS tausta

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;
}

Kokeile itse

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;
}

Kokeile itse

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:

läpinäkyvyys 1
läpinäkyvyys 0.6
läpinäkyvyys 0.3
läpinäkyvyys 0.1

Esimerkki

div {
  background-color: green;
  läpinäkyvyys: 0.3;
}

Kokeile itse

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ä:

100% läpinäkyvyys
60% läpinäkyvyys
30% läpinäkyvyys
10% läpinäkyvyys

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 */
}

Kokeile itse