CSS Kullanarak Resimleri Transparan Yapma

by A.Gökhan, M.Sc. | Nisan 30 20:33

Geliştirdiğiniz web projelerinin tasarımlarını yapma aşaması, içerisinde bulunduğumuz bu dönemde oldukça eğlenceli olsa gerek. Zira gelişen CSS dili ve JQuery kütüphanesi ile biraz da görsel yeteneğiniz var ise mükemmel işler çıkarmamıza olanak sağlamakta. İnternette bulabileceğimiz sayısız örnek, yazı, tasarım gibi desteklerle işlerimiz de kolaylaşıyor. Bu yazıda görseller üzerine uygulanan ve tasarımı güzelleştiren nadide bir örnek işleyeceğiz. Resimleri basit CSS tanımlarıyla transparan yaparak tasarıma şeffaflık katacağız.

<img src="http://phpservisi.com/phpbanner.png" width="250" height="250">

1	<img src="http://phpservisi.com/phpbanner.png" width="250" height="250">

Yukarıda genişlik ve yükseklik değerleri 250 piksel olan bir resim eklemek için tek satır HTML yazıyoruz. Ekran görüntüsü şu şekilde olacaktır:

Yukarıdaki resim için bir adet CSS class oluşturalım ve ismine de “transparan” diyelim:

<style>
.transparan{ 
    opacity:0.4; 
    filter:alpha(opacity=40);
}
</style>

<img src="http://phpservisi.com/phpbanner.png" width="250" height="250" class="transparan">

<style>

.transparan{

opacity:0.4;

filter:alpha(opacity=40);

}

</style>

İki resim arasındaki fark şeffaflık olmak suretiyle rahatlıkla görüntülenebilmektedir.

Source URL: http://www.phpservisi.com/css-kullanarak-resimleri-transparan-yapma/