الفرق بين المراجعتين لصفحة: «Sass/rgba»
< Sass
لا ملخص تعديل |
لا ملخص تعديل |
||
| سطر 2: | سطر 2: | ||
تضبط الدالة <code>()rgba</code> شفافية لون معيّن، أو تُنشئ لونًا انطلاقا من المركبات: الأحمر والأخضر والأزرق والشفافية. | تضبط الدالة <code>()rgba</code> شفافية لون معيّن، أو تُنشئ لونًا انطلاقا من المركبات: الأحمر والأخضر والأزرق والشفافية. | ||
== البنية العامة | == البنية العامة == | ||
=== الشكل الأول === | |||
<syntaxhighlight lang="sass"> | <syntaxhighlight lang="sass"> | ||
rgba($red, $green, $blue,$alpha) | rgba($red, $green, $blue,$alpha) | ||
</syntaxhighlight> | </syntaxhighlight> | ||
== المعاملات | ==== المعاملات ==== | ||
=== <code>$red</code> === | ===== <code>$red</code> ===== | ||
مقدار الحُمرة في اللون، ينبغي أن تكون بين <code>0</code> و <code>250</code>، أو بين <code>0%</code> و <code>100%</code>. | مقدار الحُمرة في اللون، ينبغي أن تكون بين <code>0</code> و <code>250</code>، أو بين <code>0%</code> و <code>100%</code>. | ||
=== <code>$green</code> === | ===== <code>$green</code> ===== | ||
مقدار الخُضرة في اللون، ينبغي أن تكون بين <code>0</code> و <code>250</code>، أو بين <code>0%</code> و <code>100%</code>. | مقدار الخُضرة في اللون، ينبغي أن تكون بين <code>0</code> و <code>250</code>، أو بين <code>0%</code> و <code>100%</code>. | ||
=== <code>$blue</code> === | ===== <code>$blue</code> ===== | ||
مقدار الزرقة في اللون، ينبغي أن تكون بين <code>0</code> و <code>250</code>، أو بين <code>0%</code> و <code>100%</code>. | مقدار الزرقة في اللون، ينبغي أن تكون بين <code>0</code> و <code>250</code>، أو بين <code>0%</code> و <code>100%</code>. | ||
=== <code>$alpha</code> === | ===== <code>$alpha</code> ===== | ||
شفافية اللون، ينبغي أن تكون بين <code>0</code> و <code>1</code>. | شفافية اللون، ينبغي أن تكون بين <code>0</code> و <code>1</code>. | ||
== | === الشكل الثاني === | ||
<syntaxhighlight lang="sass"> | <syntaxhighlight lang="sass"> | ||
rgba($color,$alpha) | rgba($color,$alpha) | ||
</syntaxhighlight> | </syntaxhighlight> | ||
== المعاملات | ==== المعاملات ==== | ||
=== <code>$color</code> === | ===== <code>$color</code> ===== | ||
اللون الذي ستُغير شفافيته. | اللون الذي ستُغير شفافيته. | ||
=== <code>$alpha</code> === | ===== <code>$alpha</code> ===== | ||
شفافية اللون، ينبغي أن تكون بين <code>0</code> و <code>1</code>. | شفافية اللون، ينبغي أن تكون بين <code>0</code> و <code>1</code>. | ||
| سطر 43: | سطر 44: | ||
مثال عن استخدام الدالة <code>rgba()</code> لضبط قيمة اللون (<code>[[CSS/color|color]]</code>) ولون الخلفية (<code>[[CSS/background-color|background-color]]</code>):<syntaxhighlight lang="sass"> | مثال عن استخدام الدالة <code>rgba()</code> لضبط قيمة اللون (<code>[[CSS/color|color]]</code>) ولون الخلفية (<code>[[CSS/background-color|background-color]]</code>):<syntaxhighlight lang="sass"> | ||
.selector { | .selector { | ||
color: rgba(#102030, 0.5);// rgba(16, 32, 48, 0.5) | |||
background-color: rgba(blue, 0.2); // rgba(0, 0, 255, 0.2) | |||
} | } | ||
</syntaxhighlight> | </syntaxhighlight> | ||
سيُصرّف المثال السابق إلى شيفرة [[CSS]] الآتية:<syntaxhighlight lang="css"> | سيُصرّف المثال السابق إلى شيفرة [[CSS]] الآتية:<syntaxhighlight lang="css"> | ||
.selector { | .selector { | ||
color: rgba(16, 32, 48, 0.5); | |||
background-color: rgba(0, 0, 255, 0.2); | |||
} | } | ||
</syntaxhighlight> | </syntaxhighlight> | ||
== انظر أيضًا == | == انظر أيضًا == | ||
* الدالة <code>[[Sass/rgb|rgb()]]</code>: تُنشئ لونًا انطلاقًا من المركبات اللونية الثلاث. | |||
== مصادر == | == مصادر == | ||
مراجعة 10:41، 21 أبريل 2018
تضبط الدالة ()rgba شفافية لون معيّن، أو تُنشئ لونًا انطلاقا من المركبات: الأحمر والأخضر والأزرق والشفافية.
البنية العامة
الشكل الأول
rgba($red, $green, $blue,$alpha)
المعاملات
$red
مقدار الحُمرة في اللون، ينبغي أن تكون بين 0 و 250، أو بين 0% و 100%.
$green
مقدار الخُضرة في اللون، ينبغي أن تكون بين 0 و 250، أو بين 0% و 100%.
$blue
مقدار الزرقة في اللون، ينبغي أن تكون بين 0 و 250، أو بين 0% و 100%.
$alpha
شفافية اللون، ينبغي أن تكون بين 0 و 1.
الشكل الثاني
rgba($color,$alpha)
المعاملات
$color
اللون الذي ستُغير شفافيته.
$alpha
شفافية اللون، ينبغي أن تكون بين 0 و 1.
القيم المعادة
اللون الذي أُنشئ أو عُدِّل.
الأخطاء والاستثناءات
سيُرمى الخطأ ArgumentError إن كانت المعاملات من النوع الخاطئ أو خارج الحدود.
أمثلة
مثال عن استخدام الدالة rgba() لضبط قيمة اللون (color) ولون الخلفية (background-color):
.selector {
color: rgba(#102030, 0.5);// rgba(16, 32, 48, 0.5)
background-color: rgba(blue, 0.2); // rgba(0, 0, 255, 0.2)
}
سيُصرّف المثال السابق إلى شيفرة CSS الآتية:
.selector {
color: rgba(16, 32, 48, 0.5);
background-color: rgba(0, 0, 255, 0.2);
}
انظر أيضًا
- الدالة
rgb(): تُنشئ لونًا انطلاقًا من المركبات اللونية الثلاث.