hsla() Function
تابع ()hsla
در CSS رنگ را بر مبنای hue - saturation - lightness - alpha
تعریف می کند.
نحوه نوشتار
background-color: hsla(182, 25%, 50%, 0.75); background-color: hsla(16, 100%, 50%, 0.65); hsla(hue, saturation, lightness, alpha);
مقادیر
hue
درجه را روی چرخه رنگ (color wheel) تنظیم میکند. این درجه (از 0 تا 360) روی دایره ایست که تمام رنگهای اصلی به همراه طیفهای آنها بر روی آن قرار دارد.
saturation
میزان اشباع رنگ را از ٪0 کاملا بدون رنگ (سیاه و سفید) تا ٪100 که اشباع رنگ در نهایت خود قرار دارد را مشخص می کند.
lightness
میزان روشنایی رنگ را مشخص می کند. ٪0 کاملا سیاه و ٪100 سفید است.
alpha
میزان وضوح عنصر را مشخص میکند. 0 کاملا شفاف ( ناپیدا ) و 1 کاملا مات ( واضح و قابل رویت ) میباشد.
در مثال زیر نحوه عملکرد این تابع CSS را میبینیم:
در این مثال هر یک از رنگها را در دو حالت، یکی با وضوح کامل و دیگری با وضوح نسبی نشان داده می شود. در رنگهایی که مقدار alpha
در آنها کمتر از 1
است، عنصر شفافتر شده و رنگ پس زمینه از آن عبور می کند. این امکان تا جایی میتواند ادامه پیدا کند که پس زمینه (background) عنصر کاملا شفاف ( نامرئی ) شود.
مشاهده و ویرایش کد در حالت تمام صفحه
html
<section> <div class="color1"> background-color: hsla(182, 25%, 50%, 0.75); </div> <div class="color2"> background-color: hsl(182, 25%, 50%); </div> </section> <section> <div class="color3"> background-color: hsla(16, 100%, 50%, 0.65); </div> <div class="color4"> background-color: hsl(16, 100%, 50%); </div> </section>
css
section { background-color: blue; padding: 20px; } div { text-align: center; color: #ffffff; padding: 15px 0; font-family: consolas; margin: 5px 0; } .color1 { background-color: hsla(182, 25%, 50%, 0.75); } .color2 { background-color: hsl(182, 25%, 50%); } .color3 { background-color: hsla(16, 100%, 50%, 0.65); } .color4 { background-color: hsl(16, 100%, 50%); }
پشتیبانی مرورگرها
تمام مرورگرها از این تابع CSS پشتیبانی می کنند.