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ükseklikdeğ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 relativedeğ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 🙂