0Pricing
CSS Academy · Ders

Arka Plan Rengi ve Görseli

background-color ve background-image özelliklerini kullanarak arka plan renkleri ve görseller uygulayın.

Arka Plan Rengi ve Görseli, CoddyKit'te ücretsiz bir CSS Academy dersidir. Bu, 4 dersinin 2. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, CSS Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. CSS Academy kursu toplamda 4 dersten oluşur.

background-color

background-color özelliği, bir öğenin arkasına düz bir renk yerleştirir. Herhangi bir CSS renk değerini kabul eder ve arka plan görsellerinin saydam alanlarından görünür.

<div class="hero">Hero section</div>

background-image

background-image, bir veya daha fazla görseli öğenin arka planı olarak ayarlar. Görseller, background-color katmanının üzerinde yer alır.

<div class="banner">Banner (image missing &rarr; fallback color shows)</div>

background-size

background-size, görselin boyutlarını denetler. Temel değerler:

  • cover — alanı doldurur, gerekirse kırpar
  • contain — görseli tamamen içine sığdırır, boşluk bırakabilir
  • 100% 100% — alanı tam olarak dolduracak şekilde esnetir
<div class="hero"></div>

background-position

background-position, görselin nereye yerleştirileceğini belirler. Anahtar sözcükleri veya yüzde/uzunluk değerlerini kullanın.

<div class="hero"></div>

background-repeat

Görseller varsayılan olarak döşenir. Döşemeyi background-repeat ile denetleyin:

<div class="hero"></div>
  <div class="pattern"></div>

background-attachment

background-attachment, bir görselin sayfayla birlikte kaydırılıp kaydırılmayacağını belirler. fixed paralaks benzeri bir etki oluşturur; scroll varsayılandır.

<div class="spacer">Scroll down &darr;</div>
  <div class="parallax">Fixed background</div>
  <div class="spacer">Scroll up &uarr;</div>

Birden Çok Arka Plan

CSS, virgülle ayrılmış birden çok arka plan katmanını destekler. İlk listelenen katman en üstte görünür.

<div class="card">Overlay + photo layers</div>

background Kısa Yazımı

background kısa yazımı, tüm arka plan özelliklerini tek bir bildirimin içinde birleştirir. Boyut için sıra önemlidir: boyutu, konumdan sonra / ile ayırarak yazın.

<div class="hero"></div>

Arka Plan Kırpması ve Başlangıç Noktası

background-clip, arka planın kutu modeline göre nereye boyanacağını denetler. background-origin, konumlandırma için başvuru noktasını belirler.

<div class="card">Clip &amp; Origin</div>

Metin Arka Planı Kırpması

Bir arka plan görselini veya renk geçişini metnin şekline göre kırpmak için background-clip: text özelliğini saydam bir metin rengiyle birlikte kullanın.

<h1>Gradient Text</h1>

<img> için object-fit ve background-image karşılaştırması

<img> etiketleri için background-image yerine object-fit: cover ve object-position kullanın. Bu yaklaşım, erişilebilirlik ve SEO açısından görselleri DOM içinde tutar.

<img class="hero-img" src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='800'><rect width='400' height='800' fill='%23ff6347'/><circle cx='200' cy='200' r='150' fill='%231e90ff'/></svg>" alt="hero" />

Hızlı Kontrol

Hangi background-size değeri alanı doldurur ve boşluk bırakmak yerine görseli kırpar?

Özet

Görsellerin altında yedek seçenek olarak background-color kullanın. background-size: cover, alanı tamamen kaplayan büyük başlık görselleri için tercih edilen seçenektir. Birden çok arka plan katmanı, güçlü bir birleştirme olanağı sağlar. Kısa yazım, tüm arka plan özelliklerini kısa ve öz biçimde birleştirir.

Sıkça Sorulan Sorular

“Arka Plan Rengi ve Görseli” dersi ücretsiz mi?

Evet — “Arka Plan Rengi ve Görseli” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve CSS Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. CSS Academy kursu toplamda 4 dersten oluşur.

“Arka Plan Rengi ve Görseli” dersinde ne öğreneceğim?

background-color ve background-image özelliklerini kullanarak arka plan renkleri ve görseller uygulayın. CSS Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

CSS Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te CSS Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 2. dersidir.

“Arka Plan Rengi ve Görseli” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu CSS Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her CSS Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

  1. Renk Değerleri: Adlandırılmış, Hex, RGB, HSL
  2. Arka Plan Rengi ve Görseli
  3. Degradeler: Doğrusal ve Radyal
  4. Opaklık ve RGBA Saydamlığı
← CSS Academy Sayfasına Dön