وثائق CSS قابلة للتشغيل: لون الخلفية

Q: كيف أغيّر لون الخلفية في HTML؟

استخدم خاصية CSS المسماة background-color. للصفحة كلها: body { background-color: #f3f4f6; }. ولعنصر واحد: .

Q: هل ما زالت bgcolor صالحة في HTML؟

لا. السمة bgcolor على و و ملغاة في HTML5. ما زالت المتصفحات ترسمها للصفحات القديمة، لكن الطريقة الصحيحة هي background-color في CSS.

Q: كيف أجعل لون الخلفية شفافًا؟

استخدم لونًا بقناة ألفا، مثل background-color: rgb(37 99 235 / 20%);. على عكس opacity، يبقي هذا النص الذي بالداخل مرئيًا بالكامل.

Q: ما الفرق بين background وbackground-color؟

تضبط background-color اللون فقط. أما background فاختصار لكل خصائص الخلفية (اللون، الصورة، الموضع، الحجم، التكرار، الارتباط، الأصل، والقص)، لذلك تعيد background: red; أيضًا أي صورة خلفية إلى none.

Q: لماذا يملأ لون خلفية body النافذة كلها؟

حين لا يكون للعنصر خلفية خاصة به، يطلي المتصفح خلفية body عبر اللوحة كلها، حتى خارج صندوق body. أعطِ html خلفية إن أردت أن يختلفا.

لون الخلفية background-color في CSS: الصفحات والعناصر والشفافية

تملأ background-color صندوق العنصر بلون. تعلّم كيف تضبط لون خلفية صفحة كاملة، أو div، أو صف في جدول، أو كلمة واحدة، وكيف تعمل الشفافية، ولماذا bgcolor ملغاة، وما الفرق بين background-color والاختصار background.

تحتوي هذه الصفحة على محررات قابلة للتشغيل - حرّر، شغّل، وشاهد النتيجة فوراً.

بقلم Kevin Spektor, Co-founder & CTO

نُشر في Sep 24, 2026

كيف تضبط لون الخلفية

تملأ background-color صندوق العنصر بلون، بما فيه حشوه والمنطقة التي تحت حده. تقبل أي لون في CSS.

<!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>

لون الصفحة مضبوط على body، والبطاقة والإشعار على عناصر div الخاصة بهما، والتظليل على عنصر سطري. العناصر السطرية تحصل على خلفية خلف نصها فقط، سطرًا بسطر.

لون خلفية الصفحة كلها

ضع background-color على body. إن لم يكن للعنصر <html> خلفية خاصة به، يطلي المتصفح خلفية body فوق النافذة كلها، حتى حيث ينتهي محتوى body:

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

الطريقة القديمة في HTML كانت <body bgcolor="black">. السمة bgcolor ملغاة على كل العناصر، فاستخدم CSS بدلًا منها. ما زالت المتصفحات تحترمها للصفحات القديمة، ولهذا قد تبدو كأنها تعمل.

الخلفيات الشفافة

يبدأ كل عنصر بـ background-color: transparent، فترى الأب خلفه. لتلوين صندوق مع بقاء ما خلفه ظاهرًا، استخدم لونًا بقناة ألفا:

<!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 ستُظهر الخطوط أيضًا، لكنها تبهت النص كذلك. لخلفية شفافة بنص صلب استخدم لونًا بقناة ألفا. تسرد صفحة الألوان كل طرق كتابته.

أين يُطلى اللون

افتراضيًا تصل الخلفية إلى الحافة الخارجية للحد (فتظهر عبر حد متقطع أو شبه شفاف). تغيّر background-clip ذلك:

<!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>

في الصندوق الأول يظهر الكهرماني بين الشرطات. في الثاني يتوقف عند الحافة الداخلية للحد، وفي الثالث تُلوَّن منطقة المحتوى فقط. الهامش لا يُطلى أبدًا: فهو شفاف دائمًا.

صفوف جدول مخططة

خلفية على كل صف ثانٍ تجعل الجداول العريضة أسهل في التصفح:

<!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 مقابل الاختصار background

تضبط background كل خصائص الخلفية دفعة واحدة. أي جزء تتركه يعود إلى قيمته الافتراضية، وهذا ما يفاجئ الناس:

.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 */
}

استخدم background-color حين تقصد اللون فقط. واستخدم background حين تضبط الخلفية كلها في مكان واحد، غالبًا لون مع صورة؛ راجع background-image.

سهولة الوصول: اقرنه بلون النص

لون الخلفية لا يكون مقروءًا إلا بجانب لون نصه. كلما ضبطت أحدهما، افحص الآخر: يطلب WCAG نسبة تباين 4.5:1 على الأقل لنص الجسم. الخلفيات الداكنة تحتاج إلى نص فاتح مضبوط صراحة، لأن النص يحتفظ باللون الداكن الذي يرثه.

أخطاء شائعة

استخدام bgcolor. إنها ملغاة. استخدم background-color.
استخدام opacity لخلفية شفافة. تبهت المحتوى أيضًا. استخدم لونًا بقناة ألفا.
اختصار background بعد background-image. يعيد ضبط الصورة. اكتب background-color بدلًا منه.
توقع أن يُظهر الهامش اللون. الهامش خارج الخلفية. استخدم الحشو للمسافة الملونة.
خلفية داكنة مع النص الافتراضي. اضبط color فاتحًا أيضًا.

الأسئلة الشائعة

كيف أغيّر لون الخلفية في HTML؟

استخدم خاصية CSS المسماة background-color. للصفحة كلها: body { background-color: #f3f4f6; }. ولعنصر واحد: <div style="background-color: #fef3c7;">.

هل ما زالت bgcolor صالحة في HTML؟

لا. السمة bgcolor على <body> و<table> و<td> ملغاة في HTML5. ما زالت المتصفحات ترسمها للصفحات القديمة، لكن الطريقة الصحيحة هي background-color في CSS.

كيف أجعل لون الخلفية شفافًا؟

استخدم لونًا بقناة ألفا، مثل background-color: rgb(37 99 235 / 20%);. على عكس opacity، يبقي هذا النص الذي بالداخل مرئيًا بالكامل.

ما الفرق بين background وbackground-color؟

تضبط background-color اللون فقط. أما background فاختصار لكل خصائص الخلفية (اللون، الصورة، الموضع، الحجم، التكرار، الارتباط، الأصل، والقص)، لذلك تعيد background: red; أيضًا أي صورة خلفية إلى none.

لماذا يملأ لون خلفية body النافذة كلها؟

حين لا يكون للعنصر <html> خلفية خاصة به، يطلي المتصفح خلفية body عبر اللوحة كلها، حتى خارج صندوق body. أعطِ html خلفية إن أردت أن يختلفا.

مفاهيم ذات صلة