CSS hsla()用法及代碼示例

hsla()函數是CSS中的內置函數，用於使用色相飽和度亮度Alpha(HSLA)模型定義顏色。

用法:

hsla( hue, saturation, lightness, alpha )

參數：該函數接受上述和以下所述的四個參數：

hue:此參數用於定義色輪上的度數。其值介於0到360之間，其中0或360代表紅色，120代表綠色，240代表藍色。
saturation:此參數用於定義飽和度，其中0％代表灰色陰影，而100％代表全彩色。
lightness:此參數用於定義亮度，其中0％代表黑色，50％代表正常，100％代表白色。
alpha:此參數用於定義不透明度，值介於0.0(完全透明)和1.0(完全不透明)之間。

以下示例程序旨在說明CSS中的hsla()函數：

程序：

<!DOCTYPE html> 
<html> 
    <head> 
        <title>hsla function</title> 
        <style>  
            .gfg1 { 
                background-color:hsla(120, 100%, 40%, 0.3); 
                text-align:center; 
            } 
            .gfg2 { 
                background-color:hsla(120, 100%, 75%, 0.3); 
                text-align:center 
            } 
            .gfg3 { 
                background-color:hsla(120, 100%, 20%, 0.3); 
                text-align:center 
            } 
            .gfg { 
                font-size:40px; 
                font-weight:bold; 
                color:green; 
                text-align:center; 
            } 
            h1 { 
                text-align:center; 
            } 
        </style> 
    </head> 
    <body> 
        <div class = "gfg">GeeksforGeeks</div> 
        <h1>The hsla() Function</h1> 
        <p class = "gfg1">Green</p> 
        <p class = "gfg2">Light green</p> 
        <p class = "gfg3">Dark green</p> 
    </body> 
</html>

輸出：

支持的瀏覽器：hsla()函數支持的瀏覽器如下：

Chrome 1.0及以上
Internet Explorer 9.0及以上
Firefox 3.0及更高版本
Safari 3.1及更高版本
Opera 10.0及以上

相關用法

注：本文由純淨天空篩選整理自Mahadev99大神的英文原創作品 CSS | hsla() Function。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。