شفافیت (Opacity) در CSS
ویژگی «شفافیت (Opacity)» میزان تاری یا شفاف بودن یک عنصر را تعیین می کند. این مقدار بین 0 تا 1 است. بنابراین 0 کاملاً شفاف، 0.5 نیمه شفاف و 1 بدون شفافیت است.
مقداردهی شفافیت
برای اعمال شفافیت روی تصویر یا هر عنصر، کافی است مقدار opacity را تنظیم کنید:
img { opacity: 0.5; }- 0.0 — عنصر کاملاً نامرئی می شود.
- 0.5 — عنصر 50٪ شفاف است.
- 1.0 — مقدار پیش فرض و کاملاً مات.
شفافیت با حالت هاور (:hover)
رایج است که با «کلاس شبه (Pseudo-class)» :hover شفافیت را هنگام عبور ماوس تغییر دهیم. ابتدا نیمه شفاف و سپس در هاور مات می شود:
img { opacity: 0.5; }
img:hover { opacity: 1; }اثر معکوس هاور
می توانید برعکس عمل کنید تا در هاور، تصویر شفاف تر شود:
img:hover { opacity: 0.5; }توجه به ارث بری شفافیت
وقتی opacity را روی والد می گذارید، همه فرزندان همان شفافیت را می گیرند. بنابراین متن داخل جعبه ممکن است ناخوانا شود:
.box { opacity: 0.3; }هشدار: اگر فقط پس زمینه باید شفاف باشد، از opacity روی والد استفاده نکنید؛ متن نیز کم رنگ می شود.
جایگزین بهتر: رنگ پس زمینه RGBA
برای شفاف کردن صرفِ پس زمینه و حفظ وضوح متن، از background-color با مقدار RGBA استفاده کنید. بدین صورت شفافیت فقط به رنگ پس زمینه اعمال می شود:
.transbox { background: rgba(4, 170, 109, 0.3); }نکته: پارامتر alpha در RGBA بین 0 تا 1 است و میزان «شفافیت (Opacity)» رنگ را تعیین می کند.
نمونه جعبه شفاف با متن خوانا
در این الگو، والد تصویر پس زمینه دارد و لایه رویی با RGBA شفاف است. متن چون فرزند شفاف نشده، خوانا می ماند:
.background { background: url(klematis.jpg) repeat; border: 2px solid black; }
.transbox { margin: 30px; background-color: rgba(255, 255, 255, 0.6); border: 1px solid black; }
.transbox p { margin: 5%; font-weight: bold; color: #000; }مطالعه بیشتر
برای آشنایی با هاور به کلاس های شبه مراجعه کنید. همچنین درباره درج محتوای تزئینی می توانید عناصر شبه را ببینید. اگر به تمرکز بر «شفافیت (Opacity)» نیاز دارید، این صفحه مرجع شماست.