تابع ()hsla در CSS

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 پشتیبانی می کنند.