الخاصية opacity

تُحدِّد الخاصية opacity في CSS درجة شفافية أحد العناصر، أي مدى ظهور المحتوى الذي يقع وراءه.

بطاقة الخاصية

القيمة الابتدائية	1.0
تُطبَّق على	جميع العناصر.
قابلة للوراثة	لا
قابلة للحركة	نعم
القيمة المحسوبة	القيمة المُحدَّدة لكن ضمن المجال من 0 إلى 1.

/* غير شفاف */
opacity: 1;
opacity: 1.0;

/* نصف شفاف */
opacity: 0.6;

/* شفاف تمامًا */
opacity: 0;
opacity: 0.0;

/* القيم العامة */
opacity: inherit;
opacity: initial;
opacity: unset;

تُطبَّق الخاصية opacity على العنصر ككل، بما في ذلك محتوى، حتى لو لم تكن قيمة هذه الخاصية قابلةً للوراثة من الأبناء؛ وبالتالي سيكون للعنصر وجميع أبنائه نفس الشفافية. إذا لم ترغب بتطبيق الشفافية على العناصر الأبناء، فاستخدام الخاصية background بدلًا منها كما في المثال الآتي:

background: rgba(0, 0, 0, 0.4);

أمثلة

مثال بسيط عن الخاصية opacity

مثال بسيط عن عناصر <div> خلفيتها خضراء، وتختلف عن بعضها بقيمة الشفافية عبر تطبيق الخاصية opacity عليها:

div {
  background-color: #205a23;
  color: white;
}

.light {
  opacity: 0.2; /* بالكاد يمكن رؤية النص */
}
.medium {
  opacity: 0.5; /* يمكن رؤية النص بوضوح نسبيًا */
}
.heavy {
  opacity: 0.9; /* النص واضح جدًا */
}

شيفرة HTML:

<div class="light">بالكاد تستطيع قراءة هذا النص</div>
<div class="medium">هذا النص أسهل قراءةً</div>
<div class="heavy">من السهل جدًا قراءة هذا النص</div>

تغيير الشفافية عند مرور الفأرة فوق العنصر

مثال عن تغيير الشفافية عند مرور الفأرة (‎:hover) فوق العنصر <img>:

img.opacity {
  opacity: 1;
}
 
img.opacity:hover {
  opacity: 0.5;
}

شيفرة HTML:

<img src="wiki-logo.png" alt="Wiki Hsoub Logo" class="opacity">

دعم المتصفحات

الميزة	Chrome	Firefox	Internet Explorer	Opera	Safari
الدعم الرئيسي	1.0	1.0	9.0	9.0	1.2

البنية العامة

تقبل الخاصية opacity قيمةً واحدةً تُحدِّد مستوى الشفافية.

<number>

تُمثِّل هذه القيمة الرقمية (التي يتراوح مجالها من 0.0 إلى 1.0) مستوى الشفافية لقناة alpha، وأيّ قيمة تخرج عن المجال المسموح ستُقرَّب إلى أقرب طرف منه.

• القيمة 0 تعني أنَّ العنصر شفافٌ تمامًا (أي أنه غير مرئي).
• أي رقم <number> بين 0.0 و 1.0 يعني أنَّ العنصر نصف شفاف (أي يمكن رؤية محتواه ومحتوى ما تحته).
• القيمة 1 تعني أنَّ العنصر غير شفاف أبدًا.

البنية الرسمية

opacity: <number>;

انظر أيضًا

• الخاصية color التي تضبط لون العنصر.
• الخاصية background-color التي تضبط لون خلفية العنصر.
• الدالة opacity()‎ التي يمكن استخدامها مع الخاصية filter.

مصادر ومواصفات

• مسودة CSS Transitions.
• مواصفة CSS Color Module Level 3.