آشنایی با مفهوم opacity در CSS

CSS Opacity

0 285

opacity چیست؟

opacity در لغت به معنی «شفافیت» است و در عمل میزان دید ما نسبت به یک عنصر را نشان می دهد. این خصوصیت می تواند مقداری بین 0.0 تا 1.0 بگیرد به شکلی که: 1 یعنی شفافیت کامل که میتوانیم عنصر را به صورت کامل ببینیم و 0 یعنی هیچ دیدی نسبت به عنصر نداریم. برای درک بهتر به تصویر زیر نگاهی بیندازید:

Opacity در زبان CSS
Opacity در زبان CSS

در این مجموعه تصویر، سه تصویر وجود دارد که به ترتیب از سمت راست به چپ دارای opacity با مقدار های 1 (پیش فرض) و 0.5 و 0.2 هستند.

نکته: بحث Opacity رنگ با کم رنگ یا پر رنگ بودن آن متفاوت است! زمانی که یک رنگ «کم رنگ» باشد یا «روشن تر» باشد یعنی آن رنگ غلظت بالایی ندارد و مقدار رنگ سفید بیشتری مخلوط در خودش دارد بنابراین حتی اگر رنگی روشن باشد تصویر پشت آن دیده نمی شود اما اگر شفاف باشد یعنی به نسبت میزان شفافی آن می توان محتوای پشت آن را دید. به تصویر زیر توجه کنید:

تفاوت شفافیت رنگ با روشن تر بودن رنگ
تفاوت opacity با روشن تر بودن رنگ

در تصویر بالا پشت هر سه مربع رنگی، نوشته ی «عناصر پشت سر» را قرار داده ام اما این نوشته تنها در مربع سوم که opacity کمتری دارد قابل مشاهده است.

همچنین باید بدانید که در مرورگر های IE8 و نسخه های قبلی آن باید از (filter:alpha(opacity=x استفاده کنید. x می تواند مقادیری بین 0 تا 100 بگیرد:

مشاهده ی خروجی در JSBin

کمی خلاق تر

یکی از کارهای جالبی که می توان در این زمینه انجام داد، ترکیب opacity و hover: است. به مثال زیر توجه کنید:

مشاهده ی خروجی در JSBin

نحوه ی کار این مثال بدین صورت است که ابتدا مانند مثال قبلی این مقاله، مقدار opacity را کاهش دادیم. سپس با استفاده از سلکتور hover: به CSS گفته ایم که اگر کاربر موس خود را روی تصویری بیاورد باید مقدار opacity به 1 برگردانده شود. سپس اگر کاربر موس خود را از روی تصویر برداشت، باز مقدار opacity کم می شود (در مثال بالا 0.5) بنابراین شاهد این افکت خاص و جالب در خروجی کد خود می شویم.

ما می توانیم این مثال را به صورت وارونه نیز انجام دهیم:

مشاهده ی خروجی در JSBin

مشکلات ارث بری (inheritance)

زمانی که از خاصیت opacity برای یک عنصر استفاده می کنیم، عناصر داخل آن (فرزندانش) نیز این خاصیت را به ارث می برند. به همین دلیل معمولا اگر عناصر پس زمینه را هدف opacity قرار دهیم، خواندن متن بسیار سخت می شود. به تصویر زیر نگاه کنید:

ارث بری opacity در عناصر فرزند که منجر به سخت تر شدن خواندن متن می شود.
ارث بری opacity در عناصر فرزند که منجر به سخت تر شدن خواندن متن می شود.

بیایید این مثال را در حالت کد واقعی ببینیم:

مشاهده ی خروجی در JSBin

به نظر شما راه حل این مشکل چیست؟ راه حل ساده ی آن استفاده از رنگ های RGBA است.

در مقاله ی «قالب های رنگی در CSS» توضیح دادیم که همیشه نیازی به استفاده از قالب رنگی hex که با # شروع می شود نیست. قالب های رنگی متفاوتی وجود دارد و شما می توانید از هر کدام که خواستید استفاده کنید (به طور مثال RGB یا HSL و …). یکی از قالب های رنگی که مشکل ما را حل می کند قالب رنگی RGBA است چرا که alpha channel را نیز مقدار دهی می کند (حرف A در آخر RGBA)، یا به زبان ساده تر همان opacity را مدیریت می کند.

اگر به خاطر داشته باشید، ساختار استفاده از RGBA به صورت (rgba(red, green, blue, alpha بود و مقدار alpha می توانست بین 0 تا 1 باشد. در مثال زیر می خواهیم استفاده از خاصیت opacity به صورت جداگانه را با استفاده از RGBA مقایسه کنیم:

مشاهده ی خروجی در JSBin

البته نیازی نیست که همیشه تنها از رنگ ها استفاده کنید بلکه می توانید از یک تصویر نیز بهره ببرید. در مثال زیر می خواهیم همین کار را انجام بدهیم:

مشاهده ی خروجی در JSBin

در این مثال ابتدا یک عنصر <div> ساخته ایم و به آن کلاس "class="background داده ایم. سپس یک تصویر پس زمینه و یک border برایش تعیین کرده ایم. بعد از آن یک <div> دیگر درون <div> قبلی ساخته و کلاس "class="transbox را به آن داده ایم. همانطور که می بینید <“div class=”transbox> یک رنگ پس زمینه و یک border دارد. در آخر با اضافه کردن مقدار opacity و یک متن، آن را تبدیل به محصول نهایی کرده ایم.

امیدوارم از این قسمت لذت برده باشید.

ترتیبی که روکسو برای یادگیری مطالب سری صفر تا صد CSS به شما توصیه می‌کند:

ارسال نظر

توجه:‌ آدرس ایمیل شما منتشر نخواهد شد.

film izle | eskisehir escort | modanisa | mersin escort | www.ieski.com | eskort adana | www.izmir-eskort.org | kabak koyu | hd tv izle