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

Q: ماذا تفعل opacity في CSS؟

تضبط مدى شفافية العنصر، من 0 (شفاف تمامًا) إلى 1 (معتم تمامًا). تنطبق على العنصر كله، بنصه وحده وصوره وكل أبنائه، كطبقة واحدة مدمجة.

Q: كيف أجعل الخلفية وحدها شفافة من دون النص؟

اترك opacity كما هي وأعطِ الخلفية لونًا بقناة ألفا: background-color: rgb(37 99 235 / 0.5); أو rgba(37, 99, 235, 0.5). يبقى النص والأبناء معتمين تمامًا.

Q: هل يمكن أن يكون الابن أكثر عتامة من أبيه؟

لا. شفافية الأب تنطبق على المجموعة كلها، فلا تستطيع opacity: 1 على الابن إلغاءها. ابن الأب ذي القيمة 0.5 يُرسم بنصف العتامة على الأكثر. انقل الشفافية إلى لون خلفية الأب بدلًا من ذلك.

Q: ما الفرق بين opacity: 0 وvisibility: hidden وdisplay: none؟

تخفي opacity: 0 العنصر لكنه ما زال يشغل مساحة، ويمكن النقر عليه، وتقرؤه قارئات الشاشة. وتحفظ visibility: hidden المساحة لكنه لا يُنقر ولا يُقرأ. أما display: none فتزيله من التخطيط تمامًا.

Q: هل يمكن أن تكون opacity نسبة مئوية؟

نعم. opacity: 50% هي نفسها opacity: 0.5 في كل المتصفحات الحالية. والقيم تحت 0 أو فوق 1 تُحصر في هذا النطاق.

ماذا تفعل opacity

تضبط opacity مدى شفافية العنصر: 1 معتم (الافتراضي)، و0 غير مرئي، وأي قيمة بينهما تترك الخلفية تظهر عبره. تقع الصناديق أدناه على خلفية مخططة كي تراها:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Opacity</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 13px; }
    .bg {
      display: flex;
      gap: 12px;
      padding: 16px;
      background: repeating-linear-gradient(45deg, #e5e7eb 0 10px, #ffffff 10px 20px);
    }
    .box { width: 90px; height: 70px; background: #2563eb; color: white; display: grid; place-items: center; font-weight: 700; }
  </style>
</head>
<body>
  <div class="bg">
    <div class="box" style="opacity: 1">1</div>
    <div class="box" style="opacity: 0.75">0.75</div>
    <div class="box" style="opacity: 0.5">0.5</div>
    <div class="box" style="opacity: 0.25">0.25</div>
    <div class="box" style="opacity: 0">0</div>
  </div>
</body>
</html>

الصندوق الأخير ما زال موجودًا: يشغل خانته البالغة 90px في الصف، لكنه لا يرسم شيئًا. لاحظ أن الأرقام البيضاء تبهت مع صناديقها. تنطبق opacity على العنصر وكل ما بداخله.

خلفية شفافة ونص معتم

لأن الشفافية تبهت الأبناء أيضًا، فهي الأداة الخاطئة لـ «خلفية شفافة خلف نص مقروء». استخدم لون خلفية بقناة ألفا بدلًا من ذلك:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Background alpha</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .bg { padding: 16px; background: repeating-linear-gradient(45deg, #f59e0b 0 10px, #ffffff 10px 20px); }
    .card { padding: 14px; margin-bottom: 10px; color: #111827; font-weight: 700; }
    .with-opacity { background: #ffffff; opacity: 0.6; }
    .with-alpha { background: rgb(255 255 255 / 0.6); }
  </style>
</head>
<body>
  <div class="bg">
    <div class="card with-opacity" id="a">opacity: 0.6 (text fades too)</div>
    <div class="card with-alpha" id="b">background alpha 0.6 (text stays solid)</div>
  </div>
  <p id="out"></p>
  <script>
    const s = (id) => getComputedStyle(document.getElementById(id));
    document.getElementById('out').textContent =
      'first: opacity ' + s('a').opacity + '  |  second: opacity ' + s('b').opacity + ', background ' + s('b').backgroundColor;
  </script>
</body>
</html>

كلتا اللوحتين البيضاوين تُظهر الخطوط بالمقدار نفسه. في الأولى يبهت النص مع اللوحة. وفي الثانية لون الخلفية وحده شفاف (rgb(255 255 255 / 0.6)، وهو نفسه rgba(255, 255, 255, 0.6))، فيبقى النص معتمًا وسهل القراءة. الألوان بقناة ألفا مشروحة في صفحة الألوان.

لا يستطيع الابن الإفلات من شفافية أبيه: opacity: 1 على الابن لا تفعل شيئًا، لأن الأب يُرسم كطبقة واحدة باهتة والابن بداخلها أصلًا.

القيم

القيمة	النتيجة
`1` أو `100%`	معتم تمامًا (الافتراضي)
`0.5` أو `50%`	نصف شفاف
`0` أو `0%`	شفاف تمامًا، ما زال في التخطيط ويمكن النقر عليه
`1.5`، `-1`	تُحصر إلى `1` و`0`

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

opacity: 0 مقابل visibility: hidden مقابل display: none

الثلاث تجعل العنصر يختفي، لكنها تختلف في كل شيء آخر:

	`opacity: 0`	`visibility: hidden`	`display: none`
يشغل مساحة	نعم	نعم	لا
يستقبل النقرات والتركيز	نعم	لا	لا
تقرؤه قارئات الشاشة	نعم	لا	لا
يمكن تحريكه بانتقال	نعم، بسلاسة	يتبدل عند أحد الطرفين، بلا تلاشٍ	لا

الفرق الذي يفاجئ هو الصف الثاني. الزر ذو opacity: 0 ما زال يمكن النقر عليه والوصول إليه بـ Tab:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Hidden but clickable</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .row { display: flex; gap: 10px; }
    .row button { width: 150px; height: 40px; font: inherit; }
  </style>
</head>
<body>
  <div class="row">
    <button id="o" style="opacity: 0">opacity: 0</button>
    <button id="v" style="visibility: hidden">visibility: hidden</button>
    <button id="d" style="display: none">display: none</button>
    <button id="shown">Visible</button>
  </div>
  <p id="out"></p>
  <script>
    const hit = (id) => {
      const r = document.getElementById(id).getBoundingClientRect();
      const top = document.elementFromPoint(r.left + 10, r.top + 10);
      return id + ': ' + (top && top.id === id ? 'clickable' : 'not clickable');
    };
    document.getElementById('out').textContent = [hit('o'), hit('v')].join('  |  ') +
      '  |  the Visible button starts at x = ' + document.getElementById('shown').offsetLeft + 'px';
  </script>
</body>
</html>

تسأل القراءة المتصفح عن العنصر الموجود تحت نقطة داخل كل زر مخفي. زر opacity: 0 يجيب «قابل للنقر»؛ وزر visibility: hidden لا يجيب. ويبدأ الزر Visible بعد خانتين فارغتين بعرض 150px، لأن زر display: none هو الوحيد الذي أعاد مساحته. لإخفاء شيء بالتلاشي ثم إزالته، حرّك opacity واضبط visibility: hidden في النهاية.

التلاشي عند التمرير

opacity من أرخص الخصائص تحريكًا، لذلك هي الطريقة المعتادة لإظهار الأشياء وإخفائها بالتلاشي. وصف يظهر فوق صورة:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Hover fade</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .tile { position: relative; width: 240px; height: 150px; background: linear-gradient(135deg, #2563eb, #16a34a); }
    .caption {
      position: absolute;
      inset: auto 0 0 0;
      padding: 10px;
      background: rgb(17 24 39 / 0.8);
      color: white;
      opacity: 0;
      transition: opacity 0.25s ease-out;
    }
    .tile:hover .caption, .tile:focus-within .caption { opacity: 1; }
  </style>
</head>
<body>
  <a class="tile" href="#" style="display: block">
    <span class="caption">Caption appears on hover and focus</span>
  </a>
</body>
</html>

تُظهر :focus-within الوصف لمستخدمي لوحة المفاتيح أيضًا. وتذكّر الجدول أعلاه: أثناء اختفاء الوصف ما زالت قارئات الشاشة تقرؤه، وهذا ما تريده لوصف صورة.

سهولة الوصول: النص الباهت يفقد تباينه

خفض الشفافية يخفض التباين. النص الرمادي على الأبيض مع opacity: 0.5 قد ينزل كثيرًا تحت نسبة 4.5:1 التي يحتاجها نص الجسم. للنص الثانوي اختر لونًا يجتاز فحص التباين بدل إبهات لون داكن. ولعناصر التحكم المعطلة، الشفافية المنخفضة إشارة شائعة، لكن اقرنها بالسمة disabled كي يصبح العنصر أيضًا غير قابل للوصول بلوحة المفاتيح ويُعلن عنه كمعطل.

أثر جانبي: سياق التراكب

أي opacity أقل من 1 تنشئ سياق تراكب جديدًا، كما تفعل transform. الأبناء ذوو z-index المرتفعة يتراكبون عندها داخل العنصر الباهت فقط ولا يستطيعون الارتفاع فوق عناصر خارجه. إن انزلقت قائمة منسدلة داخل لوحة باهتة تحت عنصر آخر، فهذا هو السبب (تشرح صفحة z-index التراكب).

أخطاء شائعة

إبهات بطاقة لجعل خلفيتها شفافة. يبهت النص أيضًا. استخدم rgb(... / 0.5) على الخلفية.
محاولة جعل الابن معتمًا من جديد. شفافية الأب تحد كل ابن.
الإخفاء بـ opacity: 0 وحدها. ما زال العنصر يستقبل النقرات والتركيز. أضف visibility: hidden، أو استخدم display: none (توقف pointer-events: none النقرات لكن لا توقف تركيز لوحة المفاتيح).
كتابة opacity: 50. الشفافية من 0 إلى 1؛ و50 تُحصر إلى 1. اكتب 0.5 أو 50%.
نص منخفض التباين بسبب الشفافية. افحص تباين النتيجة، لا تباين اللون الأصلي.

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

ماذا تفعل opacity في CSS؟

تضبط مدى شفافية العنصر، من 0 (شفاف تمامًا) إلى 1 (معتم تمامًا). تنطبق على العنصر كله، بنصه وحده وصوره وكل أبنائه، كطبقة واحدة مدمجة.

كيف أجعل الخلفية وحدها شفافة من دون النص؟

اترك opacity كما هي وأعطِ الخلفية لونًا بقناة ألفا: background-color: rgb(37 99 235 / 0.5); أو rgba(37, 99, 235, 0.5). يبقى النص والأبناء معتمين تمامًا.

هل يمكن أن يكون الابن أكثر عتامة من أبيه؟

لا. شفافية الأب تنطبق على المجموعة كلها، فلا تستطيع opacity: 1 على الابن إلغاءها. ابن الأب ذي القيمة 0.5 يُرسم بنصف العتامة على الأكثر. انقل الشفافية إلى لون خلفية الأب بدلًا من ذلك.

ما الفرق بين opacity: 0 وvisibility: hidden وdisplay: none؟

تخفي opacity: 0 العنصر لكنه ما زال يشغل مساحة، ويمكن النقر عليه، وتقرؤه قارئات الشاشة. وتحفظ visibility: hidden المساحة لكنه لا يُنقر ولا يُقرأ. أما display: none فتزيله من التخطيط تمامًا.

هل يمكن أن تكون opacity نسبة مئوية؟

نعم. opacity: 50% هي نفسها opacity: 0.5 في كل المتصفحات الحالية. والقيم تحت 0 أو فوق 1 تُحصر في هذا النطاق.

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