Praneškite apie mus:


CSS peršviečiamumas

Įvertink
(0 balsai)
1 1

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


Atnaujinimo Data: Sekmadienis, Gegužės 30, 2010
Lukas

Lukas

Manualai.lt tinklo autorius ir administratorius. VDU Energetikos Fizikos ir Verslo Informatikos studentas. LinkedIn

E-mail: Šis el. pašto adresas yra apsaugotas nuo spam botų. Jum reikalingas įjungtas Javasctipt kad jį matytumėte
Login to post comments