Merhabalar bu kısa yazıda CSS3’de nesnelere nasıl opacity değeri verebileceğimizden bahsedeceğim.Nesnelerin opacity değerini değiştirmek için aşağıdaki kodlar işinize yarayabilir.
|
1 |
<div id="box"></div> |
|
1 2 3 4 5 6 |
#box{ height:500px; width:500px; background-color:#000; opacity:0.5; } |
Kodların çalışır hali
Gördüğünüz gibi bir alan tanımladık bunun arkaplanını siyah yaptık opacity değerinide %50 yaptık.Şu ana kadar bir sorun yok.
Şöyle bir senaryo yazalım.Yine alanımız olsun ancak bu sefer alanın içerisine resim ekleyelim
|
1 2 3 |
<div id="box"> <img src="https://wiki.videolan.org/images/Ubuntu-logo.png"/> </div> |
|
1 2 3 4 5 6 |
#box{ height:500px; width:500px; background-color:#000; opacity:0.5; } |
Kodların çalışır hali
Tanımladığımız alan içine yerleştirdiğimiz resiminde opacity değeride %50’ye düştü.Bu istenmeyen bir durum haliyle.Şimdide bu durumdan nasıl kurtuluruz yani resmin opacity değerini düşürmeden sadece arkaplanın opacity değerini %50’ye düşürürüz buna bakalım
|
1 2 3 |
<div id="box"> <img src="https://wiki.videolan.org/images/Ubuntu-logo.png"/> </div> |
|
1 2 3 4 5 |
#box{ height:500px; width:500px; background-color:rgba(0,0,0,0.5); } |
Kodların çalışır hali
background-color:rgba(0,0,0,0.5) sayesinde arkaplanın opacity değerini düşürdük ve resme dokunmadık.rgba() değerindeki ilk 3 parametre renk kodları,4.parametrede opacity değeridir.RGB kodlarından RGBA’ya dönüşümü photoshopun renk paleti yapmaktadır.Ayrıca şurdaki bağlantıdan dönüşümü gerçekleştirebilirsiniz.İşte bu kadar kolay.Umarım faydalı olmuştur.
Herkese bol kodlu günler…