ホームページ > 記事 > ウェブフロントエンド > cssでhsl()とhsla()を使ってカラー値を設定する方法について簡単に説明します（画像とテキストで詳しく説明）

cssでhsl()とhsla()を使ってカラー値を設定する方法について簡単に説明します（画像とテキストで詳しく説明）

青灯夜游オリジナル: 2018-10-17 10:57:406615ブラウズ

hsl() と hsla() を使用して CSS で色の値を設定するにはどうすればよいですか?この記事では、hsl() と hsla() を使用して CSS で色の値を設定する方法について簡単に説明します。困っている友人は参考にしていただければ幸いです。

CSS でカラー値を設定するには、hsl() と hsla() の 2 つの方法があります。これらは基本的に HSL カラーモードメソッドを使用してカラーを設定します。

HSL カラーモードは、色相 (H)、彩度 (S)、明度 (L) の 3 つのカラーチャネルを変更し、それらを重ね合わせて幅を広げます。さまざまな色。 HSL カラー標準には、人間の視覚で認識できるほぼすべての色が含まれており、現在最も広く使用されているカラーシステムの 1 つです。

HSL は色相、彩度、明度の 3 つのチャネルの色を表します。

そして HSLA は HSL をベースに透明度 (A) の設定を追加します。

HSL カラーモードが何であるかがわかったので、CSS で hsl() と hsla() を使用してカラー値を設定する方法を見てみましょう。

CSS の hsl() と色の値の基本構文

hsl():

hsl(H,S,L);

H (色相: 色相): 色から派生ディスク、0 と 360 は赤、120 に近いは緑、240 は青;

S (彩度: 彩度): 値はパーセンテージで、0% はグレースケールを表し、100% を表します。最高の彩度;

L (明るさ: 明度): 値はパーセントでもあり、0% は最も暗いことを表し、50% は平均を表し、100% は最も明るいことを表します。

簡単なコード例を使用して、hsl() が色の値を設定する方法を確認できます。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>hsl()和颜色</title>
		<style>
			.demo{width: 400px;height: 240px;margin: 50px auto;}
			.hslL1 { background:hsl(320, 100%, 50%); height:40px; }      
			.hslL2 { background:hsl(320, 50%, 50%); height:40px; }      
			.hslL3 { background:hsl(320, 100%, 75%); height:40px; }      
			.hslL4 { background:hsl(202, 100%, 50%); height:40px; }      
			.hslL5 { background:hsl(202, 50%, 50%); height:40px; }      
			.hslL6 { background:hsl(202, 100%, 75%); height:40px; }  
		</style>
	</head>
	<body>
		<div class="demo">
			<div class="hslL1"></div>
			<div class="hslL2"></div>
			<div class="hslL3"></div>
			<div class="hslL4"></div>
			<div class="hslL5"></div>
			<div class="hslL6"></div>
		</div>
	</body>
</html>

レンダリング:

cssでhsl()とhsla()を使ってカラー値を設定する方法について簡単に説明します（画像とテキストで詳しく説明）

# #同じ色相ですが、彩度や明度を変えると別の色になることがわかります

background:hsl(320, 100%, 50%); 
background:hsl(320, 50%, 50%);     
background:hsl(320, 100%, 75%);

background:hsl(202, 100%, 50%); 
background:hsl(202, 50%, 50%);
background:hsl(202, 100%, 75%);

cssでhsl()とhsla()を使ってカラー値を設定する方法について簡単に説明します（画像とテキストで詳しく説明） ##css の hsla() とカラー値

hsla() の基本構文:

hsla(H,S,L,A);

hsla() の H、S、L は hsl( ）、色相、彩度、明度を表しており、基本的な設定は同じなのでここでは紹介しません。 hsla() の A 属性値を見てみましょう:

A (透明度: アルファ): 値は 0 から 1 までの数値で、0 は不透明を表し、1 は完全な透明を表します。

簡単なコード例を通じて、hsla() がどのように色の値を設定するかを見てみましょう:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.demo{width: 400px;height: 240px;margin: 50px auto;}
			.hslaL1 { background:hsla(165, 35%, 50%, 0.2); height:40px; }      
			.hslaL2 { background:hsla(165, 35%, 50%, 0.4); height:40px; }      
			.hslaL3 { background:hsla(165, 35%, 50%, 0.6); height:40px; }      
			.hslaL4 { background:hsla(165, 35%, 50%, 0.8); height:40px; }      
			.hslaL5 { background:hsla(165, 35%, 50%, 1.0); height:40px; }  
		</style>
	</head>
	<body>
		<div class="demo">
			<div class="hslaL1"></div>
			<div class="hslaL2"></div>
			<div class="hslaL3"></div>
			<div class="hslaL4"></div>
			<div class="hslaL5"></div>
			<div class="hslaL6"></div>
		</div>
	</body>
</html>

レンダリング:

cssでhsl()とhsla()を使ってカラー値を設定する方法について簡単に説明します（画像とテキストで詳しく説明） From上の例では、この6色の色相、彩度、明度は同じで、透明度を変えるだけで異なる色が表示されることがわかります。

background:hsla(165, 35%, 50%, 0.2); 
background:hsla(165, 35%, 50%, 0.4);
background:hsla(165, 35%, 50%, 0.6); 
background:hsla(165, 35%, 50%, 0.8); 
background:hsla(165, 35%, 50%, 1.0);

hsl() と hsla() のブラウザ互換性を見てみましょう:

cssでhsl()とhsla()を使ってカラー値を設定する方法について簡単に説明します（画像とテキストで詳しく説明）現在、hsl() と hsla() は次の環境で使用できます。 Firefox、Google Chrome、Safari などのブラウザはサポートが充実しており、プレフィックスなしで使用できます。

要約: 以上がこの記事の全内容です。皆さんの学習に役立つことを願っています。関連チュートリアルの詳細については、

CSS 基本ビデオチュートリアル

、 CSS3 ビデオチュートリアル、bootstrap ビデオチュートリアルをご覧ください。

以上がcssでhsl()とhsla()を使ってカラー値を設定する方法について簡単に説明します（画像とテキストで詳しく説明）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

firefox css chrome safari bootstrap css3

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：HTML+CSSでページロード（読み込み）アニメーション効果を実現次の記事：HTML+CSSでページロード（読み込み）アニメーション効果を実現

続きを見る