Bir Öğrenci Klasiği – AUG

PNG Dosyalarında Saydam Arkaplan

Gelişen bilişim teknolojileri sürecinde gif in kaliteyi bozması yüzünden jpd ve gif karşımı bir tür çıkarılmak istendi. Düşündüler ve png yi yarattılar. Kalite konusunda iki ye ayırıp 24 lük png olayını çıkarttılar. Bu sayede jpg kadar kaliteli, gif kadar esnek bir yapı oluşmuş oldu…

Kısa olarak png tarihindende bahsettik. Arkadaşlar eğer ie6 veya altı versionlardan sitemize giriyorsanız yandaki “Bizi Rss İle Takip Edin” yazısının arkaplanına da gözünüz kaymıştır. Firefox gibi yapıya sahip tarayıcılarda onun arka planı tamamen transpran yani saydam. Fakat birkaç tarayıcıda onun arkasında mavimsi birşey var.

Aslında bunun çözümünü biliyorum yanlız temamızda bulunan style karışıklığından dolayı bayağı bir sorun çekiyorum. Bu yüzden pekte kafama takmadım. Çünkü tasarımı tamamen bozmuyor

Gelelim bunun çözümüne. Normalde style dosyamız bu şekilde olur;

.resim{
width: XXXpx;
height: XXXpx;
background: url(images/resimismi.png) no-repeat;
}

Fakat bu görünümde png bizim gibi veya arkası beyaz olarak görünebilir. Siz şunu kullanacaksınız;

.resim{
width: XXXpx;
height: XXXpx;
background: url(images/resimismi.png) no-repeat;
_background-image: none;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader
(src=images/resimadresi.png,sizingMethod='scale');
}

Bu sayede görünüm tam istediğimiz gibi olacaktır. Birde tarayıcıya göre yönlendirme var. Bu sayede sadece ie6 ve aşağısında bu kodu kullanabilirsiniz;

Yanlız bir problemimiz var. Eğer bu şekilde yaparsak png üzerindeki tıklanan yerler ( linkler ) çalışmayacaktır. Bunun içinde position: relative; kullanırız;

.resim link, .resim link:active, .resim link:visited, .resim link:hover{
position: relative;
}

Bu sayede png lerimiz tam istediğimiz gibi görecek ve bir sorun çıkartmayacaktır. Diğer yazılarımda görüşmek üzere hoşçakalın...

İyi günler, iyi çalışmalar...