CSS WEB

CSS Opaklık ve Saydamlık (Opacity & Transparency)

opacity Özelliği bir HTML öğesinin şeffaflık derecesini ayarlamanızı sağlar. 1.0 ile 0.0 arasında değer almaktadır. 0 değeri tamamen saydam bir görüntü verirken 1.0 değeri tamamen doygun olan kendi orjinal görüntüsünü vermektedir.

Örnek;

Aşağıdaki örneğimizde resimlere uygulanan farklı opacity değerlerinin etkilerini görmektesiniz.

Örnek;

hover Sözde Sınıfını kullanarak bir resmin üzerine geldiğinizde saydamlık seviyesinin değişmesi güzel bir etki yaratabilir.

Örnek;

Bir HTML öğesinin arka plan rengine (background-color) saydamlık uygulanabilir. Ancak böyle bir durumda tüm alt öğeler de bu saydamlık değerine sahip olacaktır. Aşağıdaki örneğimizde <div> öğesinin arka plan rengine saydamlık uygulandığını görebilirsiniz.

Örnek;

opacity Özelliğini rgba türünden renk kodu vererek uygulayabilirsiniz.

Örnek;

Bir resmin üzerine kutu yerleştirmek istediğinizde, onu belirli bir derecede saydam yapmak uygun bir yol olacaktır.

Yorum Yap