Katmanlı gradyanlar
Birden çok gradyanı katmanlamayı öğrenirsin.
Çoklu arka plan
Bir öğeye birden çok arka plan verebilirsin; hepsi virgülle ayrılır. background: linear-gradient(...), url(...); önce gradyanı, sonra görseli katmanlar. İlk yazılan en üstte durur.
Gradyan ile görseli birlikte kullanmak yaygındır: görselin üzerine hafif bir renk geçişi serpersin. Okunabilirliği artıran bir tekniktir.
İki gradyanı katmanlamak
İki gradyanı da katmanlayabilirsin. Örneğin bir lineer gradyanın üstüne yarı saydam bir radyal gradyan serpmek için: background: radial-gradient(...), linear-gradient(...);. Radyal önce yazıldığı için üstte kalır.
Bu teknik düğmelerde ışıltı, kartlarda derinlik ya da kahraman bölgelerinde atmosfer yaratmak için kullanılır. Renkleri rgba ile saydamlaştırarak alttaki gradyanı gösterirsin.
Görselin üstüne koyu gradyan
En yaygın katmanlı kullanım, bir görselin üstüne koyu bir gradyan serpmektir. linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url(foto.jpg) yazmak, görselin üzerine yarı saydam siyah bir örtü çeker.
Bu teknik, görsel üzerindeki metnin okunabilirliğini artırır. Kahraman bölgeleri, başlık şeritleri ve kart kapaklarında sıkça karşılaşırsın; özellikle beyaz yazıyı korumak için idealdir.
Uygulama Hero arka planına gradyan katmanı ekle
.hero seçicisi için iki katmanlı bir arka plan tanımla. Birinci katman linear-gradient(to bottom, rgba(0,0,0,0.4), transparent), ikinci katman url(sahil.jpg) olsun. Virgülle ayrılmış tek bir background bildirimi yaz.
Örnek çözümü göster
/* hero arka planını katmanla */
.hero {
background: linear-gradient(to bottom, rgba(0,0,0,0.4), transparent), url(sahil.jpg);
}Kendini test et
-
İki arka plan virgülle ayrıldığında hangisi üstte olur?
background: linear-gradient(...), url(bg.png);- İlk yazılan (linear-gradient)
- Son yazılan (url(bg.png))
- İkisi yan yana dizilir
- Yalnızca görsel görünür, gradyan gizlenir
Cevabı göster
İlk yazılan (linear-gradient) — Doğru. Çoklu arka planlarda ilk yazılan katman en üstte durur.
-
Yatay lineer gradyanı ikinci katman olarak yaz
background: radial-gradient(circle, rgba(255,255,255,0.4), transparent), ____;Cevabı göster
background: radial-gradient(circle, rgba(255,255,255,0.4), transparent), linear-gradient(to right, navy, teal);