תיעוד CSS עם דוגמאות להרצה: Opacity

Q: מה opacity עושה ב-CSS?

הוא קובע עד כמה אלמנט שקוף, מ-0 (שקוף לגמרי) עד 1 (אטום לגמרי). הוא חל על כל האלמנט, כולל הטקסט, הגבול, התמונות וכל ילד, כשכבה אחת שטוחה.

Q: איך הופכים רק את הרקע לשקוף, בלי הטקסט?

אל תגעו ב-opacity ותנו לרקע צבע עם ערוץ אלפא: background-color: rgb(37 99 235 / 0.5); או rgba(37, 99, 235, 0.5). הטקסט והילדים נשארים אטומים לגמרי.

Q: האם אלמנט ילד יכול להיות אטום יותר מההורה שלו?

לא. ה-opacity של ההורה חל על כל הקבוצה, ולכן opacity: 1 על ילד לא יכול לבטל אותו. ילד של הורה עם 0.5 מצויר לכל היותר בחצי אטימות. העבירו את השקיפות לצבע הרקע של ההורה במקום.

Q: מה ההבדל בין opacity: 0, visibility: hidden ו-display: none?

opacity: 0 מסתיר את האלמנט, אבל הוא עדיין תופס מקום, אפשר ללחוץ עליו וקוראי מסך קוראים אותו. visibility: hidden שומר את המקום, אבל אי אפשר ללחוץ עליו והוא לא נקרא. display: none מוציא אותו מהפריסה לגמרי.

Q: האם opacity יכול להיות באחוזים?

כן. opacity: 50% זהה ל-opacity: 0.5 בכל הדפדפנים הנוכחיים. ערכים מתחת ל-0 או מעל 1 נחתכים לטווח הזה.

מה opacity עושה

opacity קובע עד כמה אלמנט שקוף: 1 הוא אטום (ברירת המחדל), 0 הוא בלתי נראה, וכל ערך באמצע נותן לרקע להיראות דרכו. הקופסאות למטה יושבות על רקע מפוספס כדי שתוכלו לראות אותו:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Opacity</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 13px; }
    .bg {
      display: flex;
      gap: 12px;
      padding: 16px;
      background: repeating-linear-gradient(45deg, #e5e7eb 0 10px, #ffffff 10px 20px);
    }
    .box { width: 90px; height: 70px; background: #2563eb; color: white; display: grid; place-items: center; font-weight: 700; }
  </style>
</head>
<body>
  <div class="bg">
    <div class="box" style="opacity: 1">1</div>
    <div class="box" style="opacity: 0.75">0.75</div>
    <div class="box" style="opacity: 0.5">0.5</div>
    <div class="box" style="opacity: 0.25">0.25</div>
    <div class="box" style="opacity: 0">0</div>
  </div>
</body>
</html>

הקופסה האחרונה עדיין שם: היא תופסת את המקום של 90px שלה בשורה, היא פשוט לא מציירת כלום. שימו לב שהמספרים הלבנים דוהים יחד עם הקופסאות שלהם. opacity חל על האלמנט ועל כל מה שבתוכו.

רקע שקוף, טקסט אטום

מכיוון ש-opacity מדהה גם את הילדים, הוא הכלי הלא נכון ל"רקע שקוף מאחורי טקסט קריא". השתמשו במקום זאת בצבע רקע עם ערוץ אלפא:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Background alpha</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .bg { padding: 16px; background: repeating-linear-gradient(45deg, #f59e0b 0 10px, #ffffff 10px 20px); }
    .card { padding: 14px; margin-bottom: 10px; color: #111827; font-weight: 700; }
    .with-opacity { background: #ffffff; opacity: 0.6; }
    .with-alpha { background: rgb(255 255 255 / 0.6); }
  </style>
</head>
<body>
  <div class="bg">
    <div class="card with-opacity" id="a">opacity: 0.6 (text fades too)</div>
    <div class="card with-alpha" id="b">background alpha 0.6 (text stays solid)</div>
  </div>
  <p id="out"></p>
  <script>
    const s = (id) => getComputedStyle(document.getElementById(id));
    document.getElementById('out').textContent =
      'first: opacity ' + s('a').opacity + '  |  second: opacity ' + s('b').opacity + ', background ' + s('b').backgroundColor;
  </script>
</body>
</html>

שני הלוחות הלבנים נותנים לפסים להיראות דרכם באותה מידה. בראשון, הטקסט דוהה יחד עם הלוח. בשני רק צבע הרקע שקוף (rgb(255 255 255 / 0.6), זהה ל-rgba(255, 255, 255, 0.6)), ולכן הטקסט נשאר אטום וקל לקריאה. צבעים עם אלפא מוסברים בדף על צבעים.

ילד לא יכול לברוח מה-opacity של ההורה שלו: opacity: 1 על הילד לא עושה כלום, כי ההורה מצויר כשכבה דהויה אחת שהילד כבר נמצא בתוכה.

ערכים

ערך	תוצאה
`1` או `100%`	אטום לגמרי (ברירת מחדל)
`0.5` או `50%`	חצי שקוף
`0` או `0%`	שקוף לגמרי, עדיין בפריסה ולחיץ
`1.5`, `-1`	נחתכים ל-`1` ול-`0`

opacity עובר בירושה ויזואלית אבל לא כמאפיין: ה-opacity המחושב של ילד נשאר 1, בזמן שהוא מצויר בתוך הורה דהוי.

opacity: 0 מול visibility: hidden מול display: none

שלושתם גורמים לאלמנט להיעלם, אבל הם שונים בכל השאר:

	`opacity: 0`	`visibility: hidden`	`display: none`
תופס מקום	כן	כן	לא
מקבל לחיצות ופוקוס	כן	לא	לא
נקרא על ידי קוראי מסך	כן	לא	לא
אפשר להפעיל עליו transition	כן, בצורה חלקה	מתחלף בקצה אחד, בלי דהייה	לא

ההבדל שנושך הוא השורה השנייה. על כפתור עם opacity: 0 עדיין אפשר ללחוץ ולהגיע אליו ב-Tab:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Hidden but clickable</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .row { display: flex; gap: 10px; }
    .row button { width: 150px; height: 40px; font: inherit; }
  </style>
</head>
<body>
  <div class="row">
    <button id="o" style="opacity: 0">opacity: 0</button>
    <button id="v" style="visibility: hidden">visibility: hidden</button>
    <button id="d" style="display: none">display: none</button>
    <button id="shown">Visible</button>
  </div>
  <p id="out"></p>
  <script>
    const hit = (id) => {
      const r = document.getElementById(id).getBoundingClientRect();
      const top = document.elementFromPoint(r.left + 10, r.top + 10);
      return id + ': ' + (top && top.id === id ? 'clickable' : 'not clickable');
    };
    document.getElementById('out').textContent = [hit('o'), hit('v')].join('  |  ') +
      '  |  the Visible button starts at x = ' + document.getElementById('shown').offsetLeft + 'px';
  </script>
</body>
</html>

התצוגה שואלת את הדפדפן איזה אלמנט נמצא מתחת לנקודה בתוך כל כפתור מוסתר. הכפתור עם opacity: 0 עונה "clickable"; זה עם visibility: hidden לא. הכפתור Visible מתחיל אחרי שני מקומות ריקים של 150px, כי הכפתור עם display: none הוא היחיד שהחזיר את המקום שלו. כדי להדהות משהו ואז להוציא אותו, הנפישו את opacity והגדירו visibility: hidden בסוף.

fade במעבר עכבר

opacity הוא אחד המאפיינים הזולים ביותר להנפשה, ולכן הוא הדרך הסטנדרטית להופיע ולהיעלם בהדרגה. כיתוב שמופיע מעל תמונה:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Hover fade</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .tile { position: relative; width: 240px; height: 150px; background: linear-gradient(135deg, #2563eb, #16a34a); }
    .caption {
      position: absolute;
      inset: auto 0 0 0;
      padding: 10px;
      background: rgb(17 24 39 / 0.8);
      color: white;
      opacity: 0;
      transition: opacity 0.25s ease-out;
    }
    .tile:hover .caption, .tile:focus-within .caption { opacity: 1; }
  </style>
</head>
<body>
  <a class="tile" href="#" style="display: block">
    <span class="caption">Caption appears on hover and focus</span>
  </a>
</body>
</html>

:focus-within מציג את הכיתוב גם למשתמשי מקלדת. זכרו את הטבלה שלמעלה: כשהכיתוב בלתי נראה, קוראי מסך עדיין קוראים אותו, וזה מה שרוצים בכיתוב.

נגישות: טקסט דהוי מאבד ניגודיות

הורדת ה-opacity מורידה את הניגודיות. טקסט אפור על לבן עם opacity: 0.5 יכול לרדת הרבה מתחת ליחס 4.5:1 שטקסט רץ צריך. לטקסט משני, בחרו צבע שעומד בדרישות הניגודיות במקום להדהות צבע כהה. לפקדים מושבתים, opacity מופחת הוא סימן נפוץ, אבל שלבו אותו עם המאפיין disabled כדי שגם אי אפשר יהיה להגיע לפקד במקלדת והוא יוכרז כמושבת.

תופעת לוואי: stacking context

כל opacity מתחת ל-1 יוצר stacking context חדש, כמו ש-transform עושה. ילדים עם z-index גבוה נערמים אז רק בתוך האלמנט הדהוי ולא יכולים לעלות מעל אלמנטים שמחוצה לו. אם תפריט נפתח בתוך לוח דהוי מחליק מתחת לאלמנט אחר, זו הסיבה (הדף על z-index מסביר את סדר הערימה).

טעויות נפוצות

להדהות כרטיס כדי להפוך את הרקע שלו לשקוף. גם הטקסט דוהה. השתמשו ב-rgb(... / 0.5) על הרקע.
לנסות להפוך ילד לאטום שוב. ה-opacity של ההורה מגביל כל ילד.
הסתרה עם opacity: 0 בלבד. האלמנט עדיין מקבל לחיצות ופוקוס. הוסיפו visibility: hidden, או השתמשו ב-display: none (pointer-events: none עוצר לחיצות אבל לא פוקוס מקלדת).
לכתוב opacity: 50. opacity הוא בין 0 ל-1; 50 נחתך ל-1. כתבו 0.5 או 50%.
טקסט בניגודיות נמוכה בגלל opacity. בדקו את הניגודיות של התוצאה, לא של הצבע המקורי.

שאלות נפוצות

מה opacity עושה ב-CSS?

הוא קובע עד כמה אלמנט שקוף, מ-0 (שקוף לגמרי) עד 1 (אטום לגמרי). הוא חל על כל האלמנט, כולל הטקסט, הגבול, התמונות וכל ילד, כשכבה אחת שטוחה.

איך הופכים רק את הרקע לשקוף, בלי הטקסט?

אל תגעו ב-opacity ותנו לרקע צבע עם ערוץ אלפא: background-color: rgb(37 99 235 / 0.5); או rgba(37, 99, 235, 0.5). הטקסט והילדים נשארים אטומים לגמרי.

האם אלמנט ילד יכול להיות אטום יותר מההורה שלו?

לא. ה-opacity של ההורה חל על כל הקבוצה, ולכן opacity: 1 על ילד לא יכול לבטל אותו. ילד של הורה עם 0.5 מצויר לכל היותר בחצי אטימות. העבירו את השקיפות לצבע הרקע של ההורה במקום.

מה ההבדל בין opacity: 0, visibility: hidden ו-display: none?

opacity: 0 מסתיר את האלמנט, אבל הוא עדיין תופס מקום, אפשר ללחוץ עליו וקוראי מסך קוראים אותו. visibility: hidden שומר את המקום, אבל אי אפשר ללחוץ עליו והוא לא נקרא. display: none מוציא אותו מהפריסה לגמרי.

האם opacity יכול להיות באחוזים?

כן. opacity: 50% זהה ל-opacity: 0.5 בכל הדפדפנים הנוכחיים. ערכים מתחת ל-0 או מעל 1 נחתכים לטווח הזה.

מושגים קשורים