שקיפות באמצעות RGBA

חלק מהיחידה עיצוב באמצעות CSS במסלול ה-HTML של Coddy. שיעור 28 מתוך 76.

ב-CSS, צבעי RGBA הם הרחבה של צבעי RGB הכוללת ערוץ אלפא לציון האטימות של צבע. RGBA הם ראשי תיבות של אדום, ירוק, כחול ואלפא. פרמטר האלפא הוא מספר בין 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% שקיפות).

נסו בעצמכם

<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>