כמו שראינו, אנחנו יכולים להשתמש בפונקציה RGB כדי להגדיר צבע. הפונקציה RGB מקבלת שלושה פרמטרים עבור הערך של האדום, הירוק והכחול ומתקבל צבע שמורכב משלושתם.

הפונקציה RGBA

יש פונקציה נוספת להגדרת צבע שנקראת RGBA. בדומה לפונקציה RGB, גם בה מגדירים ערכים עבור אדום, ירוק וכחול - אבל היא מקבלת פרמטר נוסף שנקרא alpha. פרמטר זה קובע את מידת האטימות של הצבע וצריך להיות בטווח שבין 0 ל- 1. מידת האטימות היא המשלים של מידת השקיפות, כלומר אם למשל ערכו של alpha הוא 0.3, אז מידת השקיפות היא 70%. אם ערכו של alpha הוא 0.25, אז מידת השקיפות היא 75%.

ערכי הקצה של הפרמטר alpha:

  • אם ערכו 0 אז הצבע שקוף לחלוטין ובלתי נראה לחלוטין
  • אם ערכו 1 אז הצבע אטום לחלוטין ללא כל שקיפות

בואו נתחיל ב- HTML פשוט שכולל רק div בודד:

<body>
   <div id="mainDiv">
      Hello
      <br><br><br><br><br><br><br><br>
      <br><br><br><br><br><br><br><br>
      <br><br><br><br><br><br><br><br>
   </div>
</body>

שימו לב ששמתי הרבה שורות ריקות (<br>) בתוך ה- div, כדי שנוכל לראות את הצבע בקלות. כעת, נשתמש ב- id של ה- div כדי לקבוע את צבע הרקע שלו ב- CSS:

body
{
   background: url("./landscape_small.png");
}

#mainDiv
{
   background-color: rgba(0, 255, 0, 1);
}

שימו לב למספר דברים:

  • מעבר לצבע הרקע של ה- div, קבעתי גם תמונת רקע ל- body.
  • לקביעת הצבע של ה- div, השתמשתי בפונקציה rgba, אשר כוללת את הפרמטר alpha.
  • בפרמטר האחרון של rgba העברתי 1. המשמעות היא שמדובר בצבע אטום לחלוטין שאי אפשר לראות דרכו, לכן זה שקול לשימוש בפונקציה rgb הרגילה.

התוצאה:

 

 

אנו רואים שהתקבלה תוצאה זהה למה שהיינו מקבלים אם היינו משתמשים בפונקציה RGB הרגילה, כיוון שהצבע שהגדרנו אטום לחלוטין ואין לו שקיפות כלל. אם, לעומת זאת, נעביר ערך של 0.55 עבור הפרמטר alpha:

body
{
   background: url("./landscape_small.png");
}

#mainDiv
{
   background-color: rgba(0, 255, 0, 0.55);
}

אז מידת האטימות של הצבע תהיה 55% בלבד, כלומר הוא 45% שקוף ו- 45% מהצבע הסופי שנראה על המסך ייקבע לפי מה שנמצא מתחתיו. התוצאה:

 

 

כעת אנחנו רואים שילוב של תמונת הרקע של ה- body ושל הרקע הירוק של ה- div, כיוון שהרקע של ה- div שקוף מעט.

בואו ננסה עם ורוד:

body
{
   background: url("./landscape_small.png");
}

#mainDiv
{
   background-color: rgba(255, 89, 222, 0.55);
}

 

 

וכעת אנחנו רואים את העולם דרך משקפיים ורודים :sunglasses:.

שכבות צבע מרובות

אין בעיה גם לשים צבע על צבע אחר. אם שניהם שקופים, נקבל ערבוב שלהם, ואם מתחתיהם יש משהו, נראה גם אותו מבעד לצבע המעורב.

בואו ננסה, למשל, להוסיף פסקה בתוך ה- div:

<body>
   <div id="mainDiv">
      Transparent green only
      <br><br><br><br><br><br><br><br>
      <p class="examPar">
         Mixed background
         <br><br><br><br><br><br><br><br>
         <br><br><br><br><br><br><br><br>
      </p>
   </div>
   <p class="examPar">
      Transparent blue only
      <br><br><br><br><br><br><br><br>
      <br><br><br><br><br><br><br><br>
   </p>
</body>

כעת יש שתי פסקאות:

  • פסקה אחת נמצאת בתוך ה- div
  • פסקה שנייה נמצאת אחרי ה- div (ומחוצה לו)

שימו לב ששתי הפסקאות שייכות ל- class שנקרא examPar.

בואו נוסיף עיצוב ב-CSS עבור ה- class של הפסקאות:

body
{
   background: url("./landscape_small.png");
}

#mainDiv
{
   background-color: rgba(0, 255, 0, 0.55);
}

.examPar
{
   background-color: rgba(0, 0, 255, 0.39);
}

קבענו לפסקאות עיצוב של רקע בצבע כחול עם ערך אלפא של 0.39, כלומר מידת שקיפות של 61%.

והתוצאה:

 

 

אפשר לראות שלושה צבעי רקע שונים, ודרך כולם אפשר לראות את התמונה של ה- body.

  • צבע הרקע העליון, הירוק, הוא הצבע של ה- mainDiv.
  • צבע הרקע האמצעי הוא טורקיז - שילוב של ירוק וכחול. הסיבה היא שזוהי פסקה כחולה אשר נמצאת על div ירוק ולכן צבע הרקע הוא שילוב שלהם.
  • צבע הרקע התחתון הוא כחול, כיוון ששם יש פסקה שנמצאת מחוץ ל- div לכן רואים רק את הצבע שלה, שהוא כחול.