CSS3 Saydam Arkaplan Rengi Kullanma

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);

Bir yanıt yazın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir