Opaklık ve alpha

opacity ve rgba/hsla ile saydamlığı öğrenirsin.

opacity özelliği

opacity bir öğenin saydamlığını 0.0 ile 1.0 arasında ayarlar. 1 tam görünür, 0 tamamen saydam, 0.5 yarı saydamdır.

Önemli nokta: opacity öğenin tümünü etkiler — metin, arka plan, kenarlık ve çocuk öğeler dahil. Saydam bir kartın içindeki yazı da saydamlaşır. Bu yüzden yalnızca arka planı saydamlaştırmak istiyorsan rgba() kullanmak daha doğru olur.

Alpha kanalı: rgba ve hsla

Alpha kanalı bir rengin saydamlığını renk değerinin içine katar. rgba(0, 0, 0, 0.5) son basamakta 0–1 arası bir değer alır; 1 tam görünür, 0 tam saydam.

Aynı mantık hsla() için de geçerlidir: hsla(355, 78%, 56%, 0.4). Bu sayede yalnızca rengin saydamlığını değiştirirsin; metin veya başka özellikler etkilenmez. Koyu bir zemin üzerine yarı saydam bir katman koymak için idealdir.

opacity ile alpha farkı

opacity ile rgba() benzer görünür ama farklı çalışır. opacity: 0.5 öğenin tümünü saydamlaştırır; metin dahil her şey soluk görünür.

background: rgba(0, 0, 0, 0.5) ise yalnızca arka planı saydamlaştırır; metin olduğu gibi kalır. Bu yüzden bir başlığın üstündeki karartma katmanını rgba() ile, bir kartın tümünü silikleştirmeyi opacity ile yaparsın.

Uygulama .overlay ve .card için saydamlık yaz

Bir .overlay sınıf seçicisi ekle ve background özelliğini rgba(0, 0, 0, 0.5) değeriyle ata. Sonra bir .card sınıf seçicisi ekle ve opacity özelliğini 0.8 değeriyle ata.

Örnek çözümü göster

/* .overlay ve .card için saydamlık ekle */
.overlay {
  background: rgba(0, 0, 0, 0.5);
}
.card {
  opacity: 0.8;
}

Kendini test et

opacity: 0.5 atanmış bir kartın içeriği ne olur?
```
.card {
  background: white;
  opacity: 0.5;
}
```
- Yalnızca arka planı yarı saydamlaştırır
- Yalnızca kenarlığı etkiler
- Kartın arka planı, metni ve çocukları yarı saydamlaşır
- Kartı tamamen görünmez yapar
Cevabı göster

Kartın arka planı, metni ve çocukları yarı saydamlaşır — Doğru. opacity tüm öğeyi ve çocuklarını yarı saydam yapar; yalnızca arka planı değil.

Yarı saydam karartma katmanı için alpha değerini yaz

.overlay {
  background: rgba(0, 0, 0, ____);
}

Cevabı göster

.overlay {
  background: rgba(0, 0, 0, 0.5);
}

Saydamlık değerini etkisine eşle

opacity: 0.5

Tüm öğe yarı saydam
rgba(0,0,0,0.5)

Yalnızca renk yarı saydam
opacity: 0

Öğe tamamen görünmez
rgba(0,0,0,1)

Renk tam görünür

Sıradaki ders: Arka plan rengi

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler