شفافیت (Opacity)

آشنایی با opacity و RGBA در CSS، تفاوت شفافیت عنصر و شفافیت رنگ

شفافیت در CSS

CSS دو روش برای ایجاد شفافیت ارائه می‌دهد: opacity و رنگ‌های RGBA/HSLA.

ویژگی opacity

شفافیت کل عنصر را کنترل می‌کند — محتوا، پس‌زمینه، حاشیه، همه:

.box {
        opacity: 1;     /* کاملاً مات */
        opacity: 0.5;   /* نیمه‌شفاف */
        opacity: 0;     /* کاملاً نامرئی */
    }

مقدار بین 0 (نامرئی) تا 1 (مات) است.

تفاوت opacity و RGBA

ویژگیopacityRGBA
تأثیرکل عنصر + فرزندانفقط رنگ مشخص
محتوامتن هم شفاف می‌شودمتن دست‌نخورده
پس‌زمینهشفافشفاف
حاشیهشفافشفاف

مثال تفاوت

/* ❌ متن هم کمرنگ می‌شود */
    .box-opacity {
        background: #3498db;
        opacity: 0.3;
        /* متن هم ۳۰٪ شفاف! */
    }
    
    /* ✅ فقط پس‌زمینه شفاف */
    .box-rgba {
        background: rgba(52, 152, 219, 0.3);
        /* متن کاملاً مات */
    }

کاربردهای شفافیت

۱. پس‌زمینه شیشه‌ای (Glassmorphism)

.glass {
        background: rgba(255, 255, 255, 0.2);
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.3);
    }

۲. Overlay تیره روی تصویر

.hero {
        position: relative;
    }
    .hero::after {
        content: "";
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
    }

۳. Hover با شفافیت

.card {
        opacity: 0.8;
        transition: opacity 0.3s;
    }
    .card:hover {
        opacity: 1;
    }

۴. عنصر مخفی (Fade)

.hidden {
        opacity: 0;
        pointer-events: none;
        /* نمایش ندارد اما جا گرفته */
    }

شفافیت با HEX ۸ رقمی

/* #RRGGBBAA */
    background: #3498db80;  /* ۵۰٪ شفاف */
    background: #ffffff40;  /* ۲۵٪ سفید */

بهترین شیوه‌ها

نکات مهم

این مبحث بخشی از دوره آموزش کامل CSS است.

ابزارهای مرتبط