Burak Şentürk | Css Image Opacity (Transparency

Merhaba,

Bu dersimizde Css kullanarak resim dosyalarına saydamlık özelliği kazandıracağız. Saydamlık özelliği başlıktada belirttiğim üzere opacity komutu ile oluşturulmaktadır. Opacity özelliği 0 ile 1 arasında bi değer alır ve 0 görünmez 1 ise resmin orjinal hali anlamına gelmektedir. Şimdi konu ile ilgili bir örnek yapalım.

img {

opacity:0.3;

}

img {

opacity:0.3;

}

yazdığımız kod sayesinde resim %30 luk bir görünüme sahip olmaktadır.

Bu özelliği herhangi bir resmime link verirken görselliği arttırması amacı ile kullanabileceğimiz gibi arka planda herhangi bir resim var ise ve resmin üzerine yazı yazmak istiyorsak hem resim gözüksün hemde yazımız okunaklı olsun diye resmin altına yarı saydam bir background eklemek amaçlı kullanabiliriz. ( en azından ben çoğunlukla bu amaçla kullanıyorum)

Şimdide buna bir örnek yapalım.

İlk olarak ana divimizi ayarlayalım.

.arkaplan

{

width: 400px;

height: 300px;

background: url(deneme.jpg);

border: 1px solid;

background-size: cover;

}

//Şimdi de transparan olarka duracak arka planımızı ayarlayalım.

.saydam

{

    width: 300px;

    height: 200px;

    margin: 10px 10px 10px 10px; // her yandan 10 ar px boşluk bırakalım.

    background-color: white;

    border: 1px solid;

    opacity: 0.7; // bu değeri çokta düşürmemekte fayda var yoksa arkadaki resimden yazılarımız okunmaz.

}

.arkaplan

{

width: 400px;

height: 300px;

background: url(deneme.jpg);

border: 1px solid;

background-size: cover;

}

//Şimdi de transparan olarka duracak arka planımızı ayarlayalım.

.saydam

{

width: 300px;

height: 200px;

margin: 10px 10px 10px 10px; // her yandan 10 ar px boşluk bırakalım.

background-color: white;

border: 1px solid;

opacity: 0.7; // bu değeri çokta düşürmemekte fayda var yoksa arkadaki resimden yazılarımız okunmaz.

}

Evet css imizi tamamladık. Şimdi ise iç içe 2 adet div oluşturalım.

<div class="arkaplan">

<div class="saydam">

<p>

buraya metin gelecek.

</p>

</div>

</div>

<p>

buraya metin gelecek.

</p>

</div>

Sınıf atamalarımızı da tamamladık. Kodumuz çalıştığında deneme.jpg backgroundu üzerinde transparan bir kutu ve onun içinde de yazdığımız metin görüntülenecektir. Dilerseniz daha şık durması adına p elementinede bir kaç güzelleştirici kod yazabilirsiniz.

İyi günler dilerim,