در CSS از ویژگی opacity برای تعیین میزان کدورت یک المان استفاده میشود. کدورت (یا opacity) متضاد شفافیت (یا transparency) است. به این معنا که هرچه مقدار opacity کمتر باشد المان شفافتر خواهد بود و هرچه مقدار opacity بیشتر باشد المان شفافیت کمتری خواهد داشت.
نحوه تعیین میزان کدورت المان با کمک ویژگی opacity
برای تعیین میزان کدورت المان کافیست مشابه با نمونه زیر مقدار مناسبی برای ویژگی opacity مشخص کنید:
.half-opaque {
background-color: #aea0b5;
opacity: 0.5;
}مقدار 0.5 برای ویژگی opacity در قانون CSS فوق باعث میشود تمام المان های دارای کلاس half-opaque با نیمی از کدورت کامل نمایش داده شوند. به این ترتیب در مقایسه با حالت معمولی، کل المان (شامل رنگ زمینه، رنگ متن و …) شفاف تر خواهند بود.
تصویر زیر نمایی از اعمال قانون قبل روی یک پاراگراف نمونه را نمایش میدهد. همانطور که مشاهده میکنید رنگ متن و زمینه آن هر دو شفافتر از حالت عادی هستند:
مقدار ویژگی 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 روی یک پاراگراف و یک تصویر را نمایش میدهد:
چند نکته در مورد شفافیت المان ها در CSS
وقتی با کمک ویژگی opacity میزان کدورت را برای یک المان مشخص میکنیم تمام المان های داخل آن نیز تحت تأثیر قرار میگیرند. برای مثال اگر یک المان <div> نیمه شفاف داشته باشیم تمام المانها و محتویات داخل این المان نیز نیمه شفاف خواهند بود.
فراموش نکنید تغییر میزان opacity یک المان میتواند باعث ناخوانا شدن متن و دشوار شدن مشاهده محتوای المان (به خصوص برای افراد دچار مشکلات بینایی) شود.
بازگشت به فهرست مجموعه آموزشی CSS
