CSS3 opacity değeri

29. Haziran 2015 CSS3, HTML/CSS 0
CSS3 opacity değeri

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.

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

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

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…


Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir