الفرق بين المراجعتين ل"CSS/opacity"

مراجعة 15:43، 28 يناير 2018

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

/* غير شفاف */
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);

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

أمثلة

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

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

شيفرة HTML:

<div class="light">You can barely see this.</div>
<div class="medium">This is easier to see.</div>
<div class="heavy">This is very easy to see.</div>

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

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

شيفرة HTML:

<img src="logo.png"
  alt=logo" width="128" height="146"
  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>;

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

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

@@ سطر 105: / سطر 105: @@
 * مسودة [https://drafts.csswg.org/css-transitions/#animatable-css CSS Transitions].
 * مواصفة [https://drafts.csswg.org/css-color-3/#opacity CSS Color Module Level 3].
-[[تصنيف:CSS]]
+[[تصنيف:CSS|{{SUBPAGENAME}}]]
-[[تصنيف:CSS Property]]
+[[تصنيف:CSS Property|{{SUBPAGENAME}}]]
-[[تصنيف:CSS Colors]]
+[[تصنيف:CSS Colors|{{SUBPAGENAME}}]]