CSS peršviečiamumas

CSS3 parametras opacity - Internet Explorer nepalaikymas

Su CSS kalbos trečia versija pasirodė parametras opacity, tačiau Internet Explorer naršyklės jo nepalaiko. Norint išgauti peršviečiamumo efektą ir su visomis naršyklėmis reikia aprašyti standartinį CSS3 parametrą opacity:x ir papildomą, skirtą tik Internet Explorer naršyklėms - filter:alpha(opacity=xx). Kadangi naršyklės, kurios nepalaiko Internet Explorer'iui skirto parametro jį tiesiog praleis, o Internet Explorer'is praleis opacity, nėra klaida aprašyti abu parametrus.

Opacity:x

Visos modernios naršyklės, kurios palaiko CSS3 kalbą supranta parametrą opacity. Opacity parametras gali turėti reikšmes nuo 0 iki 1, 0 reiškia 100% peršviečiamumą, 1 - 0% peršviečiamumą. Kitaip tariant 0 - objekto nesimato, 1 - objektas pilnai matosi. Jei reikia tarpinės reikšmės, tada galime rašyti taip: opacity:0.5; Pastebėkite, kad po nulio naudojamas ne kablelis, bet taškas. 0.5 reiškia 50%.

Internet Explorer - filter: alpha(opacity=xx)

Internet Explorer naršyklės nepalaiko opacity parametro, todėl reikia naudoti papildomą parametrą filter:alpha(opacity=xx). Vietoje xx reikia nurodyti skaičių nuo 0 iki 100. 0 - objekto nematysite, 100 - objektas pilnai rodomas, tarpinis skaičius, pvz.: 30 - 30% matomas.

Pavyzdys

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<style type="text/css">
img.pirmas {
  opacity: 0.6;
  filter:alpha(opacity=60);
}
img.pirmas:hover {
  opacity: 1;
  filter:alpha(opacity=100);
  cursor:pointer;
}
</style>
 
 
<img class="pirmas" src="img/kodai.png" /> 
<img src="img/kodai.png" />