Css’de Arkaplan Saydamlığı

Bildiğiniz gibi css’de nesneye opacity verdiğimizde, nesnenin içindekilerle birlikte saydamlığı değişiyor.. Ama genelde bize lazım olan, arkaplanın saydamlaşmasıdır.. Bunun için görsel oluşturmakta biraz mantıksızca.. Yine css kullanarak daha basit bir yol ile bu işlemi kolayca yapabiliriz..

Nasıl?

:before ile nesnenin öncesine boş bir içerik ekletip genişlik ve yükseklik değerlerini 100% yaptıktan sonra, position değerini absolute yapıp z konumunu -1 yapmalıyız.. Daha sonra nesne öncesine eklettiğimiz içeriğin kapsayıcı nesne içinde kalması için, kapsayıcı nesneye position relative değerini vermeliyiz.

Peki ya RGBA?

Normal şartlarda renk şeffaflığı için rgba kullanılabilir.
(Bkz: http://codepen.io/tayfunerbilen/pen/HLGif)
Ancak bu işlem sadece arkaplan rengi için değil, aynı zamanda arkaplan resmi ya da arkaplandaki herhangi bir şey için geçerli olduğundan, rgba bunun yerini tutmuyor ne yazık ki smile

Yayınlayan

Tayfun Erbilen

2009'dan beri web işleriyle uğraşan, aynı zamanda amatör müziklede ilgilenen sıradan birisi..

“Css’de Arkaplan Saydamlığı” üzerine 11 yorum

  1. Lea verou'un bir css3 tüyosu türkçe olarak aktarılması hoşuma gitti :))

  2. resim kullanmıcaksan rgba çok daha iyi o kadar uğraşmaya gerek kalmıyo
    örneğin;
    background: rgba(0,0,0,.3)
    hem rgba ile border'e , box-shadowa aklına ne gelirse ona bu şekilde opacity verebiliriz

  3. @TayfunErbilen

    Hafif balık etli olsada çok tatlı bir yüzü var neden olmasın Come Onnnnnnn 🙂

  4. ie8 ve öncesi için bir çözüm tavsiyen varmı? (-bence en mükelmel tavsiye ie yi kullandırmamak-), İpicu için teşekkürler

  5. @erkan, en iyi çözüm yolu 1×1 genişliğinde bir alan oluşturup photoshop'ta rengi verdikten sonra opacity düşürüp png olarak kaydetmek olacaktır.. En azından IE için uygun olsun istiyorsanız 🙂

  6. çok sağol tayfun… işin içinden çıkamadım 2 saattir…epey bi konuda yardımın oluyor çok teşekkürler paylaşımların için…kolay gelsin…

  7. Adaş yine döktürmüşsün eline sağlık.Tam da bunu arıyordum.Çok işime yaradı.Teşekkür ederim 🙂

Bir Cevap Yazın

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