Praneškite apie mus:


CSS peršviečiamumas

0

Su CSS nėra sudėtinga padaryti peršviečiamus objektus, tačiau reikia žinoti naršyklių specifiką, kitaip negausite gerai veikiančio efekto.



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" />

 

pabandyk_pats


Perskaityta: 2894 kartų

Lukas
Autorius: Lukas
El. paštas.: Šis el. pašto adresas yra apsaugotas nuo spam botų. Jum reikalingas įjungtas Javasctipt kad jį matytumėte
Manualai.lt tinklo autorius ir administratorius. VDU Energetikos Fizikos ir Verslo Informatikos studentas. LinkedIn
Raktažodžiai
stiliai    css    peršviečiamumas    css3    opacity    filter    alpha    Internet Explorer   
Patinka straipsnis?
Komentarai

Komentarų nėra. Norėdami komentuoti turite prisijungti