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)
Ominaisuus background-color
määrittää elementin taustavärin.
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.
Voit asettaa taustavärin mille tahansa HTML-elementille:
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>
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
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.
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.
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>
Asettaa elementin taustavärin