ホームページ > 記事 > ウェブフロントエンド > css3でのhsla()の用途は何ですか
css3でのhsla()の用途は何ですか
- 青灯夜游オリジナル
- 2022-03-17 18:32:241947ブラウズ
CSS3 では、hsla() 関数を使用して色相、彩度、明度、透明度を使用して色を定義します。構文は「hsla(色相値、彩度値、明度値、透明度値)」; 色相です。値の値の範囲は「0～360」、彩度と明度の値の範囲は「0%～100%」、透明度の値の範囲は「0～1」です。
このチュートリアルの動作環境: Windows 7 システム、CSS3&HTML5 バージョン、Dell G3 コンピューター。
css3 では、hsla() の機能は色を定義することです。
hsla() 関数は、色相、彩度、明度、透明度を使用して色を定義します。
HSLA は、色相、彩度、明度、透明度の略です (英語: Hue、Saturation、Lightness、Alpha)。
色相 (H) は色の基本的な属性であり、赤、黄色など、一般的に色の名前と呼ばれるものです。
彩度 (S) は色の純度を表し、値が高いほど色は純粋で、値が低いほど色は徐々に灰色になります。 0 ～ 100% の値。
明るさ (L) は 0 ～ 100% で、明るさを増やすと色は白に変わり、明るさを下げると色は黒に変わります。
透明度 (A) は、透明度を表す 0 から 1 までの値をとります。
構文:
hsla(hue, saturation, lightness, alpha)
| 値 | 説明 |
|---|---|
| ##hue - 色相 | 色相を定義します (0 ～ 360) - 0 (または 360) は赤、120 は緑、240 は青|
| 彩度を定義します。0% はグレー、100% はフルカラーです | |
| 明るさを定義 0% は暗い、50% は通常、100% は白 | |
| 透明度 0 を定義(完全に透明) ~ 1 (完全に不透明) |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#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);}
#p5 {background-color:hsla(290,100%,50%,0.3);}
#p6 {background-color:hsla(290,60%,70%,0.3);}
</style>
</head>
<body>
<p>HSL 颜色，并使用透明度:</p>
<p id="p1">绿色</p>
<p id="p2">浅绿</p>
<p id="p3">暗绿</p>
<p id="p4">柔和的绿色</p>
<p id="p5">紫色</p>
<p id="p6">柔和的紫色</p>
</body>
</html>
(学習ビデオの共有:
、Web フロントエンド )
以上がcss3でのhsla()の用途は何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。