CSS ile Transparan Resimler Yapmak (Opacity)

CSS3'ün getirdiği yeniliklerden birisi de opacity özelliğini kullanarak transparan (saydam) resimler oluşturmak. Artık diğer resim programlarını kullanmadan CSS3 ile direkt olarak resimlerin transparanlık değerlerini, mouse ile resmin üzerine gelince saydamlaşması gibi bazı ayarları yapabileceğiz.

Syntax

opacity:0.4; // IE9, Firefox, Chrome, Opera, Safari için
filter:alpha(opacity=40); // IE8 ve daha eski sürümleri için

Kullanımı

IE9 , Firefox, Chrome, Opera ve Safari için opacity:x; kullanılır. x yani transparanlık değeri 0.0 - 1.0 arası değer alabilir. 0'a yaklaştıkça daha saydam görünüş oluşur.

IE8 ve daha eski sürümler için filter:alpha(opacity=x); kullanılır. x yani transparanlık değeri 0 - 100 arası değer alabilir. 0'a yaklaştıkça daha saydam görünüş oluşur.

Örnek 1)

Bu örnekte; solda normal bir resim ve sağda transparan bir resim var.

img
{
    opacity:0.4;
    filter:alpha(opacity=40);
}

Örnek 2)

Bu örnekte; transparan 2 resim var. Mouse resmin üzerine gelince normal rengine dönüyor, resmin üzerinden uzaklaşınca transparan oluyor.

img
{
    opacity:0.4;
    filter:alpha(opacity=40);
}
img:hover
{
    opacity:1.0;
    filter:alpha(opacity=100);
}