opacity CSS özelliği, bir öğenin (ve onun çocuklarının) şeffaflık seviyesini belirler. Bu özellik, öğenin görünürlüğünü azaltmak için kullanılır, böylece öğe ve onun alt öğeleri daha şeffaf hale gelir. opacity özelliği 0.0 (tamamen şeffaf) ile 1.0 (tamamen opak) arasında bir değer alır.

.transparent-box {
  opacity: 0.5;
}

Bu örnekte, .transparent-box sınıfına sahip bir öğe %50 şeffaflıkta olacak şekilde ayarlanmıştır. Bu, öğenin arka planın bir kısmını göstermesini sağlar, fakat öğenin kendisi ve içerdiği tüm içerikler (metin, resimler vb.) aynı şeffaflık seviyesine sahip olur.

Uygulamalar ve Dikkat Edilmesi Gerekenler:

opacity özelliği, bir öğe ve onun tüm çocuk öğelerine uygulanır. Bu, öğe içindeki öğelerin opaklığını ayrı ayrı kontrol etmek istiyorsanız, iç içe öğelerde opacity kullanmanın uygun olmayabileceği anlamına gelir.

Şeffaflık, performans üzerinde olumsuz bir etkiye sahip olabilir, özellikle büyük ölçekli animasyonlar veya karmaşık sayfa düzenleri söz konusu olduğunda. Bu nedenle, şeffaflığı dikkatli kullanmak önemlidir.

Opaklık seviyesi düşük bir öğe hala etkileşim kabul eder, yani kullanıcılar öğenin üzerine tıklayabilir veya fareyle üzerinden geçebilir. Bu, visibility: hidden; veya display: none; ile gizlenmiş öğelerle karşılaştırıldığında farklı bir davranıştır.

.modal-backdrop {
  opacity: 0.4;
  background-color: black;
}

Bu örnekte, bir modal (ya da açılır pencere) arkasındaki perde olarak kullanılan .modal-backdrop sınıfı, kullanıcıya modalın odak noktası olduğunu belirtmek için sayfanın geri kalanını hafifçe karartır. %60 şeffaflık (opacity: 0.4) sayfanın geri kalanının hala görülebilir olmasını, ama aynı zamanda kullanıcının dikkatinin modal içeriğine çekilmesini sağlar.