الشفافية باستخدام RGBA

جزء من قسم Styling with CSS في رحلة HTML على Coddy — الدرس 28 من 76.

في CSS، تعتبر ألوان RGBA امتدادًا لألوان RGB التي تتضمن قناة ألفا (alpha channel) لتحديد مدى عتامة اللون. يرمز RGBA إلى Red (الأحمر)، وGreen (الأخضر)، وBlue (الأزرق)، وAlpha (ألفا). معامل ألفا هو رقم بين 0.0 (شفاف تمامًا) و1.0 (معتم تمامًا)، مما يتيح لك إنشاء ألوان بدرجات متفاوتة من الشفافية.

إليك الصيغة الأساسية لاستخدام ألوان RGBA في CSS:

selector {
    color: rgba(red, green, blue, alpha);
    background-color: rgba(red, green, blue, alpha);
}

على سبيل المثال:

p {
    color: rgba(255, 0, 0, 0.5); /* أحمر شبه شفاف */
    background-color: rgba(0, 255, 0, 0.3); /* أخضر شبه شفاف */
}

h1 {
    color: rgba(0, 0, 255, 0.7); /* أزرق شبه شفاف */
}

.overlay {
    background-color: rgba(0, 0, 0, 0.5); /* طبقة سوداء شبه شفافة */
}

التحدي

سهل

لقد تم تزويدك بمستند HTML يحتوي على عنوان <h3> وفقرة <p>. مهمتك هي استخدام خاصية background-color مع وظيفة rgba() لتنسيق هذه العناصر بالشفافية. اتبع الخطوات أدناه:

اكتب قاعدة CSS تستهدف العنصر <h3>. قم بتعيين لون الخلفية إلى الأزرق باستخدام rgba(0, 0, 255, 0.5) (شفافية بنسبة 50%).
اكتب قاعدة CSS تستهدف العنصر <p>. قم بتعيين لون الخلفية إلى الأخضر باستخدام rgba(0, 128, 0, 0.3) (شفافية بنسبة 30%).

ورقة مرجعية

توسع ألوان RGBA ألوان RGB بقناة ألفا (alpha) للشفافية. يتراوح معامل ألفا من 0.0 (شفاف تماماً) إلى 1.0 (معتم تماماً).

الصيغة الأساسية:

selector {
    color: rgba(red, green, blue, alpha);
    background-color: rgba(red, green, blue, alpha);
}

أمثلة:

p {
    color: rgba(255, 0, 0, 0.5); /* أحمر شبه شفاف */
    background-color: rgba(0, 255, 0, 0.3); /* أخضر شبه شفاف */
}

.overlay {
    background-color: rgba(0, 0, 0, 0.5); /* طبقة سوداء شبه شفافة */
}

جرّب بنفسك

<html>
<head>
    <title>Transparency with RGBA</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <h3>Did You Know?</h3>
    <p>The first computer programmer was Ada Lovelace in the 1800s!</p>
</body>
</html>