الفرق بين المراجعتين لصفحة: «CSS/opacity»

المراجعة الحالية بتاريخ 11:17، 7 أكتوبر 2022

تُحدِّد الخاصية 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.

@@ سطر 1: / سطر 1: @@
 <noinclude>{{DISPLAYTITLE:الخاصية <code>opacity</code>}}</noinclude>
-تُحدِّد الخاصية <code>opacity</code> في CSS درجة شفافية أحد العناصر، أي مدى ظهور المحتوى الذي يقع وراءه.<syntaxhighlight lang="css">
+تُحدِّد الخاصية <code>opacity</code> في [[CSS]] درجة شفافية أحد العناصر، أي مدى ظهور المحتوى الذي يقع وراءه.
+== بطاقة الخاصية ==
+{| class="wikitable" style="width: 100%;"
+|-
+! scope="row" style="width: 20%;" |[[CSS/initial value|القيمة الابتدائية]]
+|1.0
+|-
+! scope="row" |تُطبَّق على
+|جميع العناصر.
+|-
+! scope="row" |قابلة للوراثة
+|لا
+|-
+!قابلة للحركة
+|نعم
+|-
+! scope="row" |القيمة المحسوبة
+|القيمة المُحدَّدة لكن ضمن المجال من <code>0</code> إلى <code>1</code>.
+|}<syntaxhighlight lang="css">
 /* غير شفاف */
 opacity: 1;
@@ سطر 22: / سطر 41: @@
 </syntaxhighlight>
-{| class="wikitable" style="width: 100%;"
+== أمثلة ==
-|-
-! scope="row" style="width: 20%;" |[[CSS/initial value|القيمة الابتدائية]]
+=== مثال بسيط عن الخاصية <code>opacity</code> ===
-|1.0
+مثال بسيط عن عناصر <code>[[HTML/div|<nowiki><div></nowiki>]]</code> خلفيتها خضراء، وتختلف عن بعضها بقيمة الشفافية عبر تطبيق الخاصية <code>opacity</code> عليها:<syntaxhighlight lang="css">
-|-
+div {
-! scope="row" |تُطبَّق على
+  background-color: #205a23;
-|جميع العناصر.
+  color: white;
-|-
+}
-! scope="row" |قابلة للوراثة
-|لا
-|-
-!قابلة للحركة
-|نعم
-|-
-! scope="row" |القيمة المحسوبة
-|القيمة المُحدَّدة لكن ضمن المجال من <code>0</code> إلى <code>1</code>.
-|}
-== أمثلة ==
-مثال بسيط عن عناصر <code>[[HTML/div|<nowiki><div></nowiki>]]</code> خلفيتها صفراء، وتختلف عن بعضها بقيمة الشفافية عبر تطبيق الخاصية <code>opacity</code> عليها:<syntaxhighlight lang="css">
-div { background-color: #4CAF50; }
 .light {
    opacity: 0.2; /* بالكاد يمكن رؤية النص */
@@ سطر 53: / سطر 60: @@
 }
 </syntaxhighlight>شيفرة HTML:<syntaxhighlight lang="html">
-<div class="light">You can barely see this.</div>
+<div class="light">بالكاد تستطيع قراءة هذا النص</div>
-<div class="medium">This is easier to see.</div>
+<div class="medium">هذا النص أسهل قراءةً</div>
-<div class="heavy">This is very easy to see.</div>
+<div class="heavy">من السهل جدًا قراءة هذا النص</div>
-</syntaxhighlight>مثال آخر عن تغيير الشفافية عند مرور الفأرة (‎:hover) فوق العنصر <code>[[HTML/img|<img>]]</code>:<syntaxhighlight lang="css">
+</syntaxhighlight>
+=== تغيير الشفافية عند مرور الفأرة فوق العنصر ===
+مثال عن تغيير الشفافية عند مرور الفأرة (<code>[[CSS/:hover|‎:hover]]</code>) فوق العنصر <code>[[HTML/img|<img>]]</code>:<syntaxhighlight lang="css">
 img.opacity {
    opacity: 1;
@@ سطر 65: / سطر 75: @@
    opacity: 0.5;
 }
-</syntaxhighlight>شيفرة HTML:<syntaxhighlight lang="html">
+</syntaxhighlight>شيفرة [[HTML]]:<syntaxhighlight lang="html">
-<img src="logo.png"
+<img src="wiki-logo.png" alt="Wiki Hsoub Logo" class="opacity">
-  alt=logo" width="128" height="146"
-  class="opacity">
 </syntaxhighlight>
@@ سطر 91: / سطر 100: @@
 تقبل الخاصية <code>opacity</code> قيمةً واحدةً تُحدِّد مستوى الشفافية.
-=== القيمة [[CSS/number|<number>]] ===
+=== <code rel="mw:WikiLink" href="CSS/number" title="CSS/number">[[CSS/number|<number>]]</code> ===
 تُمثِّل هذه القيمة الرقمية (التي يتراوح مجالها من <code>0.0</code> إلى <code>1.0</code>) مستوى الشفافية لقناة alpha، وأيّ قيمة تخرج عن المجال المسموح ستُقرَّب إلى أقرب طرف منه.
 * القيمة <code>0</code> تعني أنَّ العنصر شفافٌ تمامًا (أي أنه غير مرئي).
-* أي رقم <code><number></code> بين <code>0.0</code> و <code>1.0</code> يعني أنَّ العنصر نصف شفاف (أي يمكن رؤية محتواه ومحتوى ما تحته).
+* أي رقم <code>[[CSS/number|<number>]]</code> بين <code>0.0</code> و <code>1.0</code> يعني أنَّ العنصر نصف شفاف (أي يمكن رؤية محتواه ومحتوى ما تحته).
 * القيمة <code>1</code> تعني أنَّ العنصر غير شفاف أبدًا.
@@ سطر 102: / سطر 111: @@
 </syntaxhighlight>
+== انظر أيضًا ==
+* الخاصية <code>[[CSS/color|color]]</code> التي تضبط لون العنصر.
+* الخاصية <code>[[CSS/background-color|background-color]]</code> التي تضبط لون خلفية العنصر.
+* الدالة <code>opacity()‎</code> التي يمكن استخدامها مع الخاصية <code>[[CSS/filter|filter]]</code>.
 == مصادر ومواصفات ==
 * مسودة [https://drafts.csswg.org/css-transitions/#animatable-css CSS Transitions].