تک دیک

واژه نامه و مجله آموزشی کامپیوتر و فناوری

تعیین کدورت و شفافیت المان ها در CSS – ویژگی opacity

در CSS از ویژگی opacity برای تعیین میزان کدورت یک المان استفاده می‌شود. کدورت (یا opacity) متضاد شفافیت (یا transparency) است. به این معنا که هرچه مقدار opacity کمتر باشد المان شفاف‌تر خواهد بود و هرچه مقدار opacity بیشتر باشد المان شفافیت کمتری خواهد داشت.

نحوه تعیین میزان کدورت المان با کمک ویژگی opacity

برای تعیین میزان کدورت المان کافیست مشابه با نمونه زیر مقدار مناسبی برای ویژگی opacity مشخص کنید:

.half-opaque {
  background-color: #aea0b5;
  opacity: 0.5;
}

مقدار 0.5 برای ویژگی opacity در قانون CSS فوق باعث می‌شود تمام المان های دارای کلاس half-opaque با نیمی از کدورت کامل نمایش داده شوند. به این ترتیب در مقایسه با حالت معمولی، کل المان (شامل رنگ زمینه، رنگ متن و …) شفاف تر خواهند بود.

تصویر زیر نمایی از اعمال قانون قبل روی یک پاراگراف نمونه را نمایش می‌دهد. همانطور که مشاهده می‌کنید رنگ متن و زمینه آن هر دو شفاف‌تر از حالت عادی هستند:

نمایی از یک پاراگراف نیمه شفاف که ظاهر آن با کمک مقدار 0.5 برای ویژگی opacity در CSS مشخص شده است.

مقدار ویژگی opacity

شما می‌توانید از مقادیر متداول زیر برای ویژگی opacity استفاده کنید:

  • عدد: (بین 0.0 تا 1.0) – در این حالت عدد 0 به معنای کاملا شفاف و عدد 1 به معنای کاملا غیرشفاف (کاملا کدر یا پررنگ) است. هر عددی بین 0 و 1 متناسب با میزان نزدیکی‌ش به صفر باعث می‌شود المان شفاف‌تر شود و هرچه به 1 نزدیک‌تر باشد باعث می‌شود المان غیرشفاف‌تر (یا پررنگ و کدرتر) شود. برای مثال مقدار 0.2 به این معناست که میزان کدورت، 0.2 حالت عادی است. مقدار پیشفرض ویژگی opacity برابر با 1 است.
  • درصد: (بین 0% تا 100%) – در این حالت 0% به معنای کاملا شفاف و 100% به معنای کاملا غیرشفاف (کاملا کدر یا پررنگ) است. هر مقداری بین 0% و 100% متناسب با میزان نزدیکی‌ش به صفر درصد باعث می‌شود المان شفاف‌تر شود و هرچه به 100% نزدیک‌تر باشد باعث می‌شود المان غیرشفاف‌تر (یا پررنگ و کدرتر) شود. برای مثال مقدار 20% به این معناست که میزان کدورت، 20% حالت عادی است.

به طور کلی هرچه مقدار ویژگی opacity در CSS بزرگتر باشد میزان کدورت المان بیشتر (و میزان شفافیت آن کمتر) خواهد بود. هرچه مقدار این ویژگی کوچکتر باشد نیز میزان کدورت المان کمتر (و میزان شفافیت آن بیشتر) خواهد بود. به طوری که مقدار 0 یا 0% برای ویژگی opacity باعث می‌شود المان کاملا شفاف یا پنهان شود.

تصویر زیر مقایسه‌ای بین چند مقدار مختلف برای ویژگی opacity روی یک پاراگراف و یک تصویر را نمایش می‌دهد:

مقایسه مقادیر مختلف برای ویژگی opacity برای تعیین میزان شفاف بودن یا کدورت المان ها در CSS

چند نکته در مورد شفافیت المان ها در CSS

وقتی با کمک ویژگی opacity میزان کدورت را برای یک المان مشخص می‌کنیم تمام المان های داخل آن نیز تحت تأثیر قرار می‌گیرند. برای مثال اگر یک المان <div> نیمه شفاف داشته باشیم تمام المان‌ها و محتویات داخل این المان نیز نیمه شفاف خواهند بود.

فراموش نکنید تغییر میزان opacity یک المان می‌تواند باعث ناخوانا شدن متن و دشوار شدن مشاهده محتوای المان (به خصوص برای افراد دچار مشکلات بینایی) شود.

بازگشت به فهرست مجموعه آموزشی CSS

امیرحسین شهسواری

عاشق دنیای رایانه و فناوری به خصوص برنامه نویسی هستم؛ یادگرفتن و البته یاد دادن چیزای جالبی که یاد گرفتم باعث خوشحالیم میشه و از اولویت‌های اصلی زندگیم به حساب میاد. از مدیریت و نوشتن در تک دیک هم واقعا لذت می‌برم :)

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *