css3でのhsla()の用途は何ですか-フロントエンドQ&A-php.cn

css3でのhsla()の用途は何ですか

青灯夜游

リリース： 2022-03-17 18:34:20

オリジナル

1900 人が閲覧しました

CSS3 では、hsla() 関数を使用して色相、彩度、明度、透明度を使用して色を定義します。構文は「hsla(色相値、彩度値、明度値、透明度値)」; 色相です。値の値の範囲は「0～360」、彩度と明度の値の範囲は「0%～100%」、透明度の値の範囲は「0～1」です。

css3でのhsla()の用途は何ですか

このチュートリアルの動作環境: 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)

ログイン後にコピー

色相を定義します (0 ～ 360) - 0 (または 360) は赤、120 は緑、240 は青#saturation - 彩度lightness - 明るさアルファ - 透明度例:

値	説明
##hue - 色相
彩度を定義します。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>

ログイン後にコピー

css3でのhsla()の用途は何ですか (学習ビデオの共有: