شفافیت (Opacity) در CSS
رنگ یکدست، عکس و گرادیان را بلدید. گاهی می‌خواهید کل عنصر نرم‌تر به نظر برسد — لایهٔ کم‌رنگ، دکمهٔ غیرفعال، کارتی که عقب بایستد. کار opacity همین است: جعبه چقدر توپر یا شفاف دیده شود.
opacity چه می‌کند؟
ویژگی opacity می‌گوید عنصر چقدر مات است. مقدار از 1 (کاملاً توپر، پیش‌فرض بیشتر عنصرها) تا 0 (کاملاً نامرئی) می‌رود. اعداد اعشاری مثل 0.5 وسط‌اند. نکتهٔ مهم: opacity روی خود عنصر و هرچه داخلش است اعمال می‌شود — متن، حاشیه، پس‌زمینه و جعبه‌های فرزند همه با هم کم‌رنگ می‌شوند.
Opacity در برابر آلفا رنگ
این دو را راحت قاطی می‌کنند. جدا نگه دارید.
📊 Opacity در برابر آلفای رنگ
| ابزار | چه چیزی کم‌رنگ می‌شود | استفادهٔ معمول |
|---|---|---|
opacity |
کل عنصر (و فرزندانش) | لایهٔ نرم، ظاهر غیرفعال، بعداً انیمیشن محو |
آلفا در rgba() / hsla() |
فقط همان لایهٔ رنگ | پس‌زمینهٔ شفاف با متن توپر روی آن |
کلیدواژهٔ transparent |
مقدار رنگ کاملاً شفاف | پنهان کردن رنگ حاشیه بدون حذف ویژگی |
visibility: hidden |
از نظر دید پنهان، چیدمان می‌ماند | ابزار دیگر — اینجا عمیق نمی‌رویم |
کاملاً توپر و نیمه‌محو
اول 1 و 0.5 را روی همان طراحی کارت مقایسه کنید.
توپر در برابر نیمه‌شفاف
css.card-solid {
opacity: 1;
background-color: #ccfbf1;
color: #042f2e;
padding: 1rem;
}
.card-soft {
opacity: 0.5;
background-color: #ccfbf1;
color: #042f2e;
padding: 1rem;
}چه چیزی را باید ببینید؟
روی .card-soft هم پس‌زمینه و متن شسته به نظر می‌رسند. Opacity حروف را جدا نمی‌گذارد.
فرزندان با والد محو می‌شوند
اگر والد opacity: 0.4 داشته باشد، تیتر و دکمهٔ تو در تو با گذاشتن opacity: 1 خودشان «درنمی‌روند». داخل لایه‌ای که از قبل محو شده نقاشی می‌شوند.
opacity والد فرزندان را می‌شوید
css.overlay {
opacity: 0.4;
background-color: #0f172a;
color: white;
padding: 1rem;
}
.overlay strong {
opacity: 1; /* داخل والد محو، قدرت کامل برنمی‌گردد */
}پیام طراحی
پنل مات با متن تیز می‌خواهید؟ پس‌زمینه را با rgba کم‌رنگ کنید، نه کل عنصر را با opacity.
فقط پر کردن نرم باشد → rgba
اینجا پس‌زمینه نیمه‌شفاف است، ولی متن با قدرت کامل می‌ماند.
پر نرم، متن توپر
css.panel {
background-color: rgba(15, 118, 110, 0.25);
color: #042f2e; /* متن با قدرت کامل */
padding: 1rem;
}عادت رابط کم‌رنگ
الگوی رایج: روی اقدام‌های فرعی یا کنترل‌های غیرفعال کمی opacity پایین‌تر تا آرام‌تر حس شوند — باز هم کنتراست خوانا بماند.
دکمهٔ فرعی کم‌رنگ
css.btn-secondary {
opacity: 0.75;
background-color: #e2e8f0;
color: #0f172a;
border: none;
padding: 0.5rem 1rem;
}صفر نامرئی است — جا ممکن است بماند
opacity: 0 عنصر را نامرئی می‌کند، ولی هنوز می‌تواند جای چیدمان بگیرد و بسته به زمینه رویداد اشاره را هم بپذیرد. اگر باید از چیدمان حذف شود، ابزار دیگری است (display: none)، نه فقط opacity.
نامرئی ولی هنوز در جریان
css.ghost {
opacity: 0;
}خودتان امتحان کنید
- دو کارت با رنگ یکسان؛ یکی
opacity: 1و یکیopacity: 0.5. - یک خط پررنگ داخل والد با
opacity: 0.4— ببینید فرزند کاملاً «از محو درنمی‌آید». - همان حس نرم را با
background-color: rgba(…, 0.25)وcolorتوپر بازسازی کنید. - دکمهٔ فرعی با
opacity: 0.75و خوانایی را چک کنید. - اختیاری: روی یک جعبه
opacity: 0بگذارید و ببینید هنوز جای خالی در چیدمان می‌گذارد.
اشتباهات رایج
opacityروی والد وقتی فقط پس‌زمینهٔ شفاف می‌خواستید- انتظار اینکه فرزند با
opacity: 1داخل والد محو، کاملاً توپر شود - استفاده از
opacity: 0به‌جای برداشتن جا از چیدمان - پایین آوردن opacity تا متن از کنتراست بیفتد
- قاطی کردن کلیدواژهٔ
transparentبا ویژگیopacity
خلاصه
opacityمی‌گوید کل عنصر چقدر شفاف است (۰–۱)- فرزندان با والد محو می‌شوند — از داخل کاملاً برنمی‌گردند
- برای پس‌زمینهٔ نرم با متن توپر، آلفا در
rgba/hslaرا ترجیح بدهید - opacity پایین می‌تواند UI را آروم کند؛ دسترسی‌پذیری را در نظر بگیرید
- نامرئی (
۰) با حذف از چیدمان یکی نیست - جفت کارت و بازسازی با rgba را تمرین کنید تا فرق‌شان واضح شود
🧠 دانش خود را بیازمایید
دانش خود را بیازمایید
خود را با این آزمون تعاملی به چالش بکشید و ببینید موضوع را چقدر خوب درک کرده‌اید
📝 دستورالعمل‌ها
- هر سوال را با دقت بخوانید
- بهترین پاسخ را برای هر سوال انتخاب کنید
- می‌توانید آزمون را هر چند بار که می‌خواهید تکرار کنید
- پیشرفت شما در بالا نمایش داده می‌شود