CSS: Прoзрачност за всички браузери
by Motivo on май.27, 2009, under CSS
За никого не е тайна, че използването на CSS за прозрачност на картинки, е едно от нещата, което не се възприема по един и същ начин от различните браузери. За да успеете да го направите съвмeстимо с всички браузери, трябва да използвате специфични за тези браузери CSS атрибути. За щастие, те не си пречат помежду си, и за това могат да се сложат под един калпак, и така използвайки един и същ клас, когато искате да добавите прозрачност, ще сте сигурни че работи под всички браузери. Ето един примерен клас със прозрачност зададена за 70%:
.t_class {
filter:alpha(opacity=70);
-moz-opacity:0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
}
А ето и, за какво точно, са тези CSS атрибути:
- opacity: 0.7; Това е „На-важния“ атрибут, защото това е CSS стандарта в момента. Използвайки този атрибут, прозрачноста, ще „работи“ при почти всички версии на Firefox, Safari, и Opera. По-принцип, това щеше да е всичко, от което, ще имате нужда при използване на прозрачност с CSS, но само ако всички браузери поддържаха текущия стандарт. За съжелние това не е така в момента, точно за това е и тази статия :)
- filter:alpha(opacity=70); Единствено по този начин, можете да накарате „Негово Нищожество“ Internet Explorer да ви послуша.
- -moz-opacity:0.7; Този атрибут ви трябва, за да подържате наистина старите браузери от семейството на Mozzila (Netscape Navigator).
- -khtml-opacity: 0.7; А това е за също много стара версия на Safari (1.x)
И не на последно място, искам да препоръчам на всички, никога да не използват прозрачност, директно на картинката, а да сложат класа в див-а, който съдържа картинката. Всичко това е за съвместим и оптимизиран код :)
