CSS "opacity" özelliği, bir öğenin saydamlık düzeyini belirlemek için kullanılır. Bu özellik, 0 ile 1 arasında bir değer alır, 0 ile tamamen saydam olurken, 1 ile tamamen görünür olur.

Bir resmin yüzde 50 saydam olması ile ilgili örnek aşağıda verilmiştir.

img {
    opacity: 0.5;
}

Bu kodda, "img" etiketi için tanımlanmış olan resimler yüzde 50 saydam olarak görüntülenecektir.

Opacity özelliği, öğenin arka planının rengini veya görselini değiştirmez, sadece öğenin saydamlık düzeyini değiştirir. Örneğin, aşağıdaki kod, bir div elementinin yarı saydam olarak görünmesini sağlar ancak arka plan rengi değişmez.

div {
    opacity: 0.5;
    background-color: blue;
}

Bu kodda, div elementinin arka planı mavi olurken, div elementinin yüzde 50 saydam olmasını sağlanır.

Ayrıca, "opacity" özelliği genellikle kullanılırken öğenin içindeki tüm öğelerin de saydamlık düzeyini değiştirmek isteyebilirsiniz.

Bir div elementinin içindeki tüm öğelerin yarı saydam olmasını sağlayan örneğe bakalım...

div {
    opacity: 0.5;
}

Bu kodda, div elementi ve içindeki tüm öğeler yüzde 50 saydam olarak görüntülenecektir.

Özetlemek gerekirse "opacity" özelliği, öğenin arka planının rengini veya görselini değiştirmez, sadece öğenin saydamlık düzeyini değiştirir. Bu nedenle, öğenin arka planının saydamlığını değiştirmek için "background-color" özelliğinin "rgba" değerleri kullanılmalıdır. Bu özellik, öğenin görünürlüğünü kontrol etmek içindir. Genellikle gizlemek veya görünür hale getirmek için kullanılır.