CSS hsla()関数

不透明度を持つ異なるHSL色を定義します:

#p1 {background-color:hsla(120,100%,50%,0.3);} /* 绿色 */
#p2 {background-color:hsla(120,100%,75%,0.3);} /* 浅绿色 */
#p3 {background-color:hsla(120,100%,25%,0.3);} /* 深绿色 */
#p4 {background-color:hsla(120,60%,70%,0.3);} /* 柔绿色 */

実際に試してみてください

定義と使用法

hsla()関数は、Hue-saturation-lightness-alphaモデル(HSLA)を使用して色を定義します。

HSLA色値はHSL色値の拡張で、アルファチャンネルを持ちます - このチャンネルは色の不透明度を指定します。

バージョン: CSS3

ブラウザのサポート

テーブルの数字は、その機能を完全にサポートする最初のブラウザのバージョンを示しています。

関数
hsla() 1.0 9.0 3.0 3.1 10.0

CSS文法

hsla(hue, saturation, lightness, alpha)
説明
hue 色輪上の度数(0から360)を定義します - 0(または360)は赤で、120は緑で、240は青です。
saturation 定義饱和度 - 0% はグレーで、100% は全色(完全饱和)です。
lightness 明るさを定義します - 0%は黒で、50%は通常、100%は白です。
alpha 不透明度を定義します - 0.0(完全に透明)から1.0(完全不透明)までの数字です。