Çalıştırılabilir CSS Dokümanları: Arka plan rengi

Q: HTML'de arka plan rengi nasıl değiştirilir?

CSS background-color özelliğini kullan. Bütün sayfa için: body { background-color: #f3f4f6; }. Tek bir element için: .

Q: bgcolor HTML'de hâlâ geçerli mi?

Hayır. , ve üzerindeki bgcolor özniteliği HTML5'te kullanımdan kalkmıştır. Tarayıcılar onu eski sayfalar için hâlâ çizer, ama doğru yol CSS'te background-color'dır.

Q: Arka plan rengi nasıl saydam yapılır?

Alfa kanallı bir renk kullan, örneğin background-color: rgb(37 99 235 / 20%);. opacity'den farklı olarak bu, içerideki metni tamamen görünür tutar.

Q: background ile background-color arasındaki fark nedir?

background-color yalnızca rengi ayarlar. background ise bütün arka plan özellikleri (renk, resim, konum, boyut, tekrar, sabitleme, origin ve clip) için bir kısa yazımdır, bu yüzden background: red; herhangi bir arka plan resmini de none'a sıfırlar.

Arka plan rengi nasıl ayarlanır

background-color, bir elementin kutusunu, padding'i ve kenarlığının altındaki alan dahil, bir renkle doldurur. Herhangi bir CSS rengini kabul eder.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Background color</title>
  <style>
    body { font-family: system-ui, sans-serif; background-color: #f3f4f6; }
    .card { background-color: #ffffff; padding: 16px; border-radius: 8px; margin-bottom: 12px; }
    .notice { background-color: #fef3c7; padding: 12px 16px; }
    mark { background-color: #bbf7d0; }
  </style>
</head>
<body>
  <div class="card">A white card on a light gray page.</div>
  <div class="notice">An amber notice.</div>
  <p>A <mark>highlighted phrase</mark> inside a sentence.</p>
  <p><span style="background-color: #2563eb; color: white; padding: 2px 6px;">inline style</span></p>
</body>
</html>

Sayfa rengi body üzerinde, kart ve bildirim kendi div'lerinde, vurgu ise satır içi bir elementte ayarlanıyor. Satır içi elementler yalnızca metinlerinin arkasında, satır satır arka plan alır.

Bütün sayfanın arka plan rengi

background-color'ı body üzerine koy. <html> elementinin kendine ait bir arka planı yoksa tarayıcı body'nin arka planını, body'nin içeriğinin bittiği yerde bile bütün pencereye boyar:

body {
  background-color: #111827;
  color: #f9fafb; /* change the text color too, for contrast */
}

Eski HTML yolu <body bgcolor="black"> idi. bgcolor özniteliği her elementte kullanımdan kalkmıştır, bu yüzden bunun yerine CSS kullan. Tarayıcılar onu eski sayfalar için hâlâ dikkate alır; çalışıyor gibi görünmesinin nedeni budur.

Saydam arka planlar

Her element background-color: transparent ile başlar, bu yüzden arkasındaki ebeveyni görürsün. Bir kutuyu renklendirip yine de arkasını görmek için alfa kanallı bir renk kullan:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Transparent background</title>
  <style>
    body {
      font-family: system-ui, sans-serif; font-weight: 600; padding: 12px;
      background: repeating-linear-gradient(45deg, #bfdbfe 0 12px, #ffffff 12px 24px);
    }
    .box { padding: 16px; margin-bottom: 10px; color: #111827; }
    .none { background-color: transparent; border: 2px dashed #111827; }
    .tint { background-color: rgb(245 158 11 / 50%); }
    .solid { background-color: rgb(245 158 11); }
  </style>
</head>
<body>
  <div class="box none">transparent (the default)</div>
  <div class="box tint" id="tint">rgb(245 158 11 / 50%)</div>
  <div class="box solid">rgb(245 158 11)</div>
</body>
</html>

opacity: 0.5 de çizgilerin görünmesine izin verirdi, ama metni de soldurur. Metni düz kalan yarı saydam bir arka plan için alfalı bir renk kullan. Bir rengi yazmanın her yolunu renkler sayfası listeliyor.

Rengin nereye boyandığı

Varsayılan olarak arka plan kenarlığın dış kenarına kadar uzanır (bu yüzden kesikli ya da yarı saydam bir kenarlığın arasından görünür). background-clip bunu değiştirir:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>background-clip</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    .box {
      display: inline-block; margin: 6px; padding: 16px;
      border: 8px dashed #111827;
      background-color: #f59e0b;
    }
    .padding { background-clip: padding-box; }
    .content { background-clip: content-box; }
  </style>
</head>
<body>
  <div class="box">border-box</div>
  <div class="box padding">padding-box</div>
  <div class="box content">content-box</div>
</body>
</html>

İlk kutuda kehribar rengi kesik çizgilerin arasından görünüyor. İkincisinde kenarlığın iç kenarında duruyor, üçüncüsünde ise yalnızca içerik alanı renkli. Margin asla boyanmaz: her zaman saydamdır.

Çizgili tablo satırları

Her iki satırdan birine verilen bir arka plan, geniş tabloları taramayı kolaylaştırır:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Striped rows</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    table { border-collapse: collapse; width: 100%; }
    th, td { padding: 8px 12px; text-align: start; }
    thead { background-color: #1f2937; color: white; }
    tbody tr:nth-child(even) { background-color: #f3f4f6; }
    tbody tr:hover { background-color: #dbeafe; }
  </style>
</head>
<body>
  <table>
    <thead><tr><th>Name</th><th>Role</th></tr></thead>
    <tbody>
      <tr><td>Ada</td><td>Engineer</td></tr>
      <tr><td>Grace</td><td>Admiral</td></tr>
      <tr><td>Alan</td><td>Mathematician</td></tr>
      <tr><td>Katherine</td><td>Physicist</td></tr>
    </tbody>
  </table>
</body>
</html>

background-color ve background kısa yazımı

background bütün arka plan özelliklerini aynı anda ayarlar. Yazmadığın her parça varsayılanına döner, bu da insanları şaşırtır:

.hero {
  background-image: linear-gradient(#2563eb, #1e40af);
  background: #111827;          /* also resets background-image to none */
}

.hero {
  background-image: linear-gradient(#2563eb, #1e40af);
  background-color: #111827;    /* only the color; the gradient stays */
}

Yalnızca rengi kastettiğinde background-color kullan. Bütün arka planı tek bir yerde, çoğunlukla bir renk artı bir resim olarak ayarlıyorsan background kullan; bkz. background-image.

Erişilebilirlik: metin rengiyle birlikte düşün

Bir arka plan rengi yalnızca metin rengiyle birlikte okunaklıdır. Birini ayarladığında diğerini kontrol et: WCAG gövde metni için en az 4.5:1 kontrast oranı ister. Koyu arka planlarda açık renkli metni açıkça ayarlaman gerekir, çünkü metin miras aldığı koyu rengi korur.

Sık yapılan hatalar

bgcolor kullanmak. Kullanımdan kalkmıştır. background-color kullan.
Yarı saydam bir arka plan için opacity kullanmak. İçeriği de soldurur. Alfalı bir renk kullan.
Bir background-image'dan sonra background kısa yazımı. Resmi sıfırlar. Bunun yerine background-color yaz.
Margin'in rengi göstermesini beklemek. Margin arka planın dışındadır. Renkli boşluk için padding kullan.
Varsayılan metinle koyu bir arka plan. Açık bir color da ayarla.

Sıkça Sorulan Sorular

HTML'de arka plan rengi nasıl değiştirilir?

CSS background-color özelliğini kullan. Bütün sayfa için: body { background-color: #f3f4f6; }. Tek bir element için: <div style="background-color: #fef3c7;">.

bgcolor HTML'de hâlâ geçerli mi?

Hayır. <body>, <table> ve <td> üzerindeki bgcolor özniteliği HTML5'te kullanımdan kalkmıştır. Tarayıcılar onu eski sayfalar için hâlâ çizer, ama doğru yol CSS'te background-color'dır.

Arka plan rengi nasıl saydam yapılır?

Alfa kanallı bir renk kullan, örneğin background-color: rgb(37 99 235 / 20%);. opacity'den farklı olarak bu, içerideki metni tamamen görünür tutar.

background ile background-color arasındaki fark nedir?

background-color yalnızca rengi ayarlar. background ise bütün arka plan özellikleri (renk, resim, konum, boyut, tekrar, sabitleme, origin ve clip) için bir kısa yazımdır, bu yüzden background: red; herhangi bir arka plan resmini de none'a sıfırlar.

body arka plan rengim neden bütün pencereyi dolduruyor?

<html> elementinin kendine ait bir arka planı olmadığında tarayıcı, body'nin arka planını body'nin kutusunun ötesine de taşarak bütün tuvale boyar. İkisinin farklı olması gerekiyorsa html'e bir arka plan ver.

İlgili kavramlar