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

من موسوعة حسوب
< CSS
مرئينص الويكي
لا ملخص تعديل
 
طلا ملخص تعديل
 
(مراجعتان متوسطتان بواسطة مستخدم واحد آخر غير معروضتين)
سطر 1: سطر 1:
<noinclude>{{DISPLAYTITLE:الخاصية <code>opacity</code>}}</noinclude>
<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;
opacity: 1;
سطر 22: سطر 41:


</syntaxhighlight>
</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 {
.light {
   opacity: 0.2; /* بالكاد يمكن رؤية النص */
   opacity: 0.2; /* بالكاد يمكن رؤية النص */
سطر 53: سطر 60:
}
}
</syntaxhighlight>شيفرة HTML:<syntaxhighlight lang="html">
</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 {
img.opacity {
   opacity: 1;
   opacity: 1;
سطر 65: سطر 75:
   opacity: 0.5;
   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>
</syntaxhighlight>


سطر 91: سطر 100:
تقبل الخاصية <code>opacity</code> قيمةً واحدةً تُحدِّد مستوى الشفافية.
تقبل الخاصية <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.0</code> إلى <code>1.0</code>) مستوى الشفافية لقناة alpha، وأيّ قيمة تخرج عن المجال المسموح ستُقرَّب إلى أقرب طرف منه.
* القيمة <code>0</code> تعني أنَّ العنصر شفافٌ تمامًا (أي أنه غير مرئي).
* القيمة <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> تعني أنَّ العنصر غير شفاف أبدًا.
* القيمة <code>1</code> تعني أنَّ العنصر غير شفاف أبدًا.


سطر 102: سطر 111:


</syntaxhighlight>
</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].
* مسودة [https://drafts.csswg.org/css-transitions/#animatable-css CSS Transitions].
* مواصفة [https://drafts.csswg.org/css-color-3/#opacity CSS Color Module Level 3].
* مواصفة [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}}]]

المراجعة الحالية بتاريخ 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.

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

مجلوبة من «https://wiki.hsoub.com/index.php?title=CSS/opacity&oldid=32403»