CSS3 Transparent - Saydam Arkaplan Rengi Uygulama

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

 

css saydam arkaplan rengi, arkaplana saydamlık verme, css transparan arkaplan rengi, css opacity

KONU İLE İLGİLİ ÖRNEKLER

Css saydam arkaplan örneği Kendin Dene


YORUMLAR




16010  kez okundu.

Online Kullanıcı Sayısı 991