Opacity-funktio

Funktio opacity mahdollistaa taustakuvan läpinäkyvyyden muuttamisen. Arvo 100% tai 1 jättää kuvan alkuperäisen läpinäkyvyyden. Arvo 0 tarkoittaa, että kuvasta tulee täysin läpinäkyvä. Mikä tahansa tällä alueella oleva luku asettaa taustalle osittaisen läpinäkyvyyden. Negatiivista arvoa ei voi asettaa. Oletusarvo on 1.

Syntaksi

cssvalitsija {
  filter: opacity(luku);
}

Esimerkki

Asetetaan kuvan läpinäkyvyys 50%:lle:

html<div id="elem"></div>

css#elem {
  filter: opacity(50%);
  background: url("bg.png") center / cover no-repeat;
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

Esimerkki

Asetetaan nyt läpinäkyvyys 100%:lle:

html<div id="elem"></div>

css#elem {
  filter: opacity(100%);
  background: url("bg.png") center / cover no-repeat;
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

Esimerkki

Asetetaan nyt funktiolle opacity arvoksi 0:

html<div id="elem"></div>

css#elem {
  filter: opacity(0);
  background: url("bg.png") center / cover no-repeat;
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

Katso myös