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