CSS-taustat


Sisällysluettelo

    Näytä sisällysluettelo


CSS-taustaominaisuuksia käytetään taustatehosteiden lisäämiseen elementtejä varten.


Näissä luvuissa opit seuraavista CSS-taustaominaisuuksista:

  • style="color:crimson">taustaväri

  • style="color:crimson">taustakuva

  • style="color:crimson">taustatoisto

  • style="color:crimson">taustaliite

  • style="color:crimson">tausta-sijainti

  • style="color:crimson">tausta (lyhyt ominaisuus)


CSS-taustaväri

Ominaisuus background-color määrittää elementin taustavärin.

Esimerkki

Sivun taustaväri asetetaan seuraavasti:

body {
  background-color: lightblue;
}

Kokeile itse →

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-color: lightblue;
}
</style>
</head>
<body>

<h1>Hello World!</h1>

<p>This page has a light blue background color!</p>

</body>
</html>


CSS:ssä väri määritetään useimmiten seuraavasti:

  • kelvollinen värin nimi - kuten "punainen"

  • HEX-arvo - kuten "#ff0000"

  • RGB-arvo, kuten "rgb(255,0,0)"

Katso täydelliset CSS-väriarvot luettelo mahdollisista väriarvoista.


Muut elementit

Voit asettaa taustavärin mille tahansa HTML-elementille:

Esimerkki

Tässä elementeillä <h1>, <p> ja <div> on erilaiset taustavärit:

h1 {
  background-color: green;
}

div {
  background-color: lightblue;
}
p {
  background-color: 
yellow;
}

Kokeile itse →

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  background-color: green;
}

div {
  background-color: lightblue;
}

p {
  background-color: yellow;
}
</style>
</head>
<body>

<h1>CSS background-color example!</h1>
<div>
This is a text inside a div element.
<p>This paragraph has its own background color.</p>
We are still in the div element.
</div>

</body>
</html>




Läpinäkyvyys/läpinäkyvyys

Ominaisuus opasiteetti määrittää elementin läpinäkyvyyden/läpinäkyvyyden. Se voi ottaa arvon 0,0 - 1,0. Mitä pienempi arvo, sitä läpinäkyvämpi:

opacity 1

opacity 0.6

opacity 0.3

opacity 0.1

Esimerkki

div {
  background-color: green;
  opacity: 0.3;
}

Kokeile itse →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  background-color: green;
}

div.first {
  opacity: 0.1;
}

div.second {
  opacity: 0.3;
}

div.third {
  opacity: 0.6;
}
</style>
</head>
<body>

<h1>Transparent Boxes</h1>

<p>When using the opacity property to add transparency to the background of an element, all of its child elements become transparent as well. This can make the text inside a fully transparent element hard to read:</p>

<div class="first">
  <h1>opacity 0.1</h1>
</div>

<div class="second">
  <h1>opacity 0.3</h1>
</div>

<div class="third">
  <h1>opacity 0.6</h1>
</div>

<div>
  <h1>opacity 1 (default)</h1>
</div>

</body>
</html>


Huomaa: kun käytät opasiteetti-ominaisuutta lisäämään läpinäkyvyyttä elementin taustaan, kaikki sen alielementit perivät saman läpinäkyvyyden. Tämä voi tehdä täysin läpinäkyvän elementin sisällä olevasta tekstistä vaikeasti luettavan.


Läpinäkyvyys RGBA:lla

Jos et halua käyttää peittävyyttä alatason elementteihin, kuten yllä olevassa esimerkissä, käytä RGBA-väriarvoja. Seuraava esimerkki määrittää läpinäkyvyyden taustavärille, ei tekstille:

100% opacity

60% opacity

30% opacity

10% opacity

Opit CSS-värit-luvusta, että voit käyttää RGB:tä väriarvona. RGB:n lisäksi voit käyttää RGB-väriarvoa alfa-kanavalla (RGBA), joka määrittää värin peittävyyden.

RGBA-väriarvo määritetään seuraavasti: rgba(punainen, vihreä, sininen, alpha). The alpha-parametri on luku väliltä 0,0 (täysin läpinäkyvä) ja 1,0 (täysin läpinäkymätön).

Vinkki: Saat lisätietoja RGBA-väreistä CSS-värit-luvussamme.

Esimerkki

div {
  background: rgba(0, 128, 0, 0.3) /* Green background with 30% opacity */
}

Kokeile itse →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  background: rgb(0, 128, 0);
}

div.first {
  background: rgba(0, 128, 0, 0.1);
}

div.second {
  background: rgba(0, 128, 0, 0.3);
}

div.third {
  background: rgba(0, 128, 0, 0.6);
}
</style>
</head>
<body>

<h1>Transparent Boxes 2</h1>

<p>Result with opacity:</p>

<div style="opacity:0.1;">
  <h1>10% opacity</h1>
</div>

<div style="opacity:0.3;">
  <h1>30% opacity</h1>
</div>

<div style="opacity:0.6;">
  <h1>60% opacity</h1>
</div>

<div>
  <h1>opacity 1</h1>
</div>

<p>Result with rgba():</p>

<div class="first">
  <h1>10% opacity</h1>
</div>

<div class="second">
  <h1>30% opacity</h1>
</div>

<div class="third">
  <h1>60% opacity</h1>
</div>

<div>
  <h1>default</h1>
</div>

<p>Notice how the text gets transparent as well as the background color when using the opacity property.</p>

</body>
</html>



CSS-taustaväriominaisuus

background-color

Asettaa elementin taustavärin