CSS3 ile birlikte gelen yeniliklerden biri de arkaplana saydam-yarı saydam renkler uygulayabilmemizdir. Bunu yapmanın birkaç yolu bulunmaktadır.
Opacity Özelliği
Background-color ile arkaplan rengini belirledikten sonra opacity özelliğini kullanarak saydamlık değerini belirtebiliriz. Opacity değeri 0 ile 1 arasında olabilir. Verdiğimiz değer 0’a yaklaştıkça saydamlık artar. Ondalık kısım nokta ile ayrılır.
background-color:blue;
opacity:0.5;
Rgba Renk Sistemi
Rgba(red, green, blue, alpha) sisteminde rengi belirtmek için kullanılan 4 değerden sonuncusu opaklığı ayarlamaktadır. İlk üç değer ise sırasıyla kırmızı, yeşil ve mavi tonların miktarını ayarlamak için kullanılır.
Renk değerleri 0-255 arasında değişirken, alpha değeri 0 ile 1 arasındadır.
background-color: rgba(200, 0, 0, 0.3);
Bu örnekte saydamlık değeri 0.3 olarak ayarlanmıştır.
Hsla Renk Sistemi
Hsla(hue, saturation, lightness, alpha) sisteminde de son değer alpha yani saydamlık değeridir.
Hue değeri 0 ile 360 arasında olup rengi ayarlamakta,
Saturation 0% ile 100% arasında olup renk doygunluğunu ayarlamakta,
Lightness 0% ile 100% arasında olup parlaklığı ayarlamaktadır.
Alpha değeri ise 0 ile 1 arasında bir değerdir.
background-color: hsla(120, 100%, 25%, 0.5);