الفرق بين المراجعتين ل"CSS/opacity"
< CSS
اذهب إلى التنقل
اذهب إلى البحث
ط (استبدال النص - '\[\[تصنيف:(.*)\]\]' ب'{{SUBPAGENAME}}') |
(إضافة قسمين وأمثلة) |
||
| سطر 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> | ||
| − | + | == أمثلة == | |
| − | + | ||
| − | + | === مثال بسيط عن الخاصية <code>opacity</code> === | |
| − | + | مثال بسيط عن عناصر <code>[[HTML/div|<nowiki><div></nowiki>]]</code> خلفيتها خضراء، وتختلف عن بعضها بقيمة الشفافية عبر تطبيق الخاصية <code>opacity</code> عليها:<syntaxhighlight lang="css"> | |
| − | + | div { | |
| − | + | background-color: #205a23; | |
| − | + | color: white; | |
| − | + | } | |
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | | | ||
| − | |||
| − | |||
| − | |||
| − | |||
.light { | .light { | ||
opacity: 0.2; /* بالكاد يمكن رؤية النص */ | opacity: 0.2; /* بالكاد يمكن رؤية النص */ | ||
| سطر 53: | سطر 60: | ||
} | } | ||
</syntaxhighlight>شيفرة HTML:<syntaxhighlight lang="html"> | </syntaxhighlight>شيفرة HTML:<syntaxhighlight lang="html"> | ||
| − | <div class="light"> | + | <div class="light">بالكاد تستطيع قراءة هذا النص</div> |
| − | <div class="medium"> | + | <div class="medium">هذا النص أسهل قراءةً</div> |
| − | <div class="heavy"> | + | <div class="heavy">من السهل جدًا قراءة هذا النص</div> |
| + | |||
| + | </syntaxhighlight> | ||
| − | + | === تغيير الشفافية عند مرور الفأرة فوق العنصر === | |
| + | مثال عن تغيير الشفافية عند مرور الفأرة (<code>[[CSS/:hover|:hover]]</code>) فوق العنصر <code>[[HTML/img|<img>]]</code>:<syntaxhighlight lang="css"> | ||
img.opacity { | img.opacity { | ||
opacity: 1; | opacity: 1; | ||
| سطر 66: | سطر 76: | ||
} | } | ||
</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"> |
| − | + | ||
| − | |||
</syntaxhighlight> | </syntaxhighlight> | ||
| سطر 91: | سطر 100: | ||
تقبل الخاصية <code>opacity</code> قيمةً واحدةً تُحدِّد مستوى الشفافية. | تقبل الخاصية <code>opacity</code> قيمةً واحدةً تُحدِّد مستوى الشفافية. | ||
| − | === | + | === <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]. | ||
مراجعة 08:46، 7 مارس 2018
تُحدِّد الخاصية 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.