از تابع hsla() برای اعمال رنگ با فرمت HSL با قابلیت تنظیم شفافیت استفاده می شود.

 

همانطور که برای تابع rgb مکملی به نام rgba وجود دارد برای تابع hsl نیز مکمل hsla وجود دارد که علاوه بر مقادیر Hue, Saturation و Lightness مقدار چهارمی به نام آلفا می پذیرد که با استفاده از آن می توان به رنگ حالت شیشه ای بودن را اضافه کرد.

ادامه مطلب

 

آلفا می تواند از 0 تا 1 باشد, جایی که 0 رنگ را بصورت کامل شفاف می کند (شیشه به معنای واقعی) و 1 شفافیت را از بین می برد (خود رنگ).

به عنوان نمونه رنگ زیر را بصورت نیمه شفاف (0.5) تنظیم می کنیم:

 

.hsla-demo {
  background-color: hsla(270, 100%, 50%, 0.5);
}

 

مشاهده می کنید که رنگ خاصیت شیشه ای به خود گرفت:

رنگ ها را در دموی زیر بررسی کنید:

 

 

 

پشتیبانی مرورگر ها

مقادیر رنگی در تمام مرورگرهای اصلی پشتیبانی می شود.

اما hsl(), hsla(), rgba(), transparentو currentColor از اینترنت اکسپلورر نسخه 9 به بعد (شامل 9) پشتیبانی می شوند.