Siirry sivun sisältöön Avut CSS HTML JavaScript Kotisivu

opacity (CSS3)

opacity-ominaisuudella määritellään elementin opasiteetti eli läpikuultavuus. Arvoksi käy, inherit-avainsanan lisäksi, <alfa-arvo> väliltä 0.0 (täysin läpinäkyvä) - 1.0 (täysin läpinäkymätön, alkuarvo).

DOM-viittaus: olio.style.opacity

Esimerkki

Esimerkkien toiminnallisuus vaatii tyylitukea.

Tämä on esimerkkielementti, jolle on pyydetty seuraava tyylimääritys:

#esimerkkielementti {
opacity:1;/*oletusarvo*/
}

Huomiot

Mikäli elementille määritellään läpikuultavuutta, eli annetaan ominaisuuden arvoksi alkuarvoa pienempi arvo (<1), se samalla perustaa uuden asemointilohkon jälkeläisilleen.

Lisätietoja englanniksi

Käytännön sovellus: CSS -kuvan vaihto

Seuraavassa toteutetaan niin kutsuttu kuvan vaihto muuttamalla sisältökuva täysin läpikuultavaksi (opacity:0;), jolloin taustakuvaksi asetettu kuva saadaan näkyviin. Vaihto aktivoituu osoitusselektorilla (:hover) ja siihen on lisätty hieman siirtymäefektiä, joka ei sinänsä vaikuta itse kuvan vaihtumiseen:

esimerkkikuva

Merkkaus koostuu DIV-elementistä, joka sisältää IMG-elementin:

<div id=kuvalohko>
  <img 
  src="1.jpg" alt="esimerkkikuva"
  width="320" height="240" />
</div>

Tyyleissä elementteihin viitataan seuraavasti:

#kuvalohko {
/*Lohkon leveys ja korkeus
  (tässä sama kuin kuvilla):*/
width:320px;
height:240px;
/*Vaihtokuva lohkon taustakuvana, jää
  aluksi näkymättömäksi sisältökuvan alle):*/
background-image:url(2.jpg);
}
#kuvalohko > img {
/*Kahden sekunnin (CSS3) siirtymäefekti:*/
transition:2s ease-in;
}
/*Osoittimen siirtyessä kuvalohkon päälle:*/
#kuvalohko:hover > img {
/*Muutetaan sisältökuva läpikuultavaksi,
  jolloin taustakuva tulee näkyviin:*/
opacity:0;
transition:2s ease-in;
}
CSS 2.1 -ominaisuusreferenssi | CSS 2.1 -taustan ja edustan ominaisuudet