検索

ホームページ >ウェブフロントエンド >CSSチュートリアル >CSSで透明色を設定する方法

CSSで透明色を設定する方法

青灯夜游
青灯夜游オリジナル
2021-04-14 19:05:563869ブラウズ

方法: 1. RGBA() 関数を使用して、赤、緑、青、透明度の重ね合わせを使用してさまざまな色を生成します。構文は、「rgba(red、green、blue、transparency)」です。 HSLA() 関数を使用して、「hsla (色相、彩度、明るさ、透明度)」という構文で色相、彩度、明度、透明度を使用して色を定義します。

CSSで透明色を設定する方法

このチュートリアルの動作環境: Windows 7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。

方法 1: RGBA() 関数を使用する

rgba() 関数は、赤 (R)、緑 (G)、青 (B)、透明度 ( A) さまざまな色を生成するオーバーレイ。

構文:

rgba(red, green, blue, alpha)

属性値:

##値説明 赤の値を定義します。値の範囲は 0 ～ 255 で、0% ～ 100% のパーセンテージも使用できます。 緑色の値を定義します。値の範囲は 0 ～ 255 で、パーセンテージ 0% ～ 100% も使用できます。 青色の値を定義します。値の範囲は 0 ～ 255 で、パーセンテージ 0% ～ 100% も使用できます。 透明度を定義します 0 (完全に透明) ～ 1 (完全に不透明)
#red
green
blue
アルファ - 透明度
例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#p1 {background-color:rgb(255,0,0,0.3);}
#p2 {background-color:rgb(0,255,0,0.3);}
#p3 {background-color:rgb(0,0,255,0.3);}
#p4 {background-color:rgb(192,192,192,0.3);}
#p5 {background-color:rgb(255,255,0,0.3);}
#p6 {background-color:rgb(255,0,255,0.3);}
</style>
</head>

<body>
<p>RGB 颜色，并使用透明度:</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>

レンダリング:

CSSで透明色を設定する方法

##方法 2: HSLA() 関数を使用する

# hsla() 関数は、色相、彩度、明度、透明度を使用して色を定義します。

HSLA は、色相、彩度、明度、透明度の略です (英語: Hue、Saturation、Lightness、Alpha)。

色相 (H) は色の基本的な属性であり、赤、黄色など、一般的に色の名前と呼ばれるものです。

  • 彩度 (S) は色の純度を表し、値が高いほど色は純粋で、値が低いほど色は徐々に灰色になります。 0 ～ 100% の値。

  • 明るさ (L) は 0 ～ 100% で、明るさを増やすと色は白に変わり、明るさを下げると色は黒に変わります。

  • 透明度 (A) は、透明度を表す 0 から 1 までの値をとります。

  • 構文: 
    • hsla(hue, saturation, lightness, alpha)
属性値:

値説明色相 - 色相#saturation - 彩度明度 - 明るさアルファ - 透明度 
<!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>
レンダリング:
色相の定義 (0 ～ 360) - 0 (または 360) は赤、120 は緑、240 は青
彩度を定義します。0% はグレー、100% はフルカラー
明るさを定義します。0% は暗い、50% は通常、100% は白です
透明度を定義 0 (完全に透明) ~ 1 (完全に不透明) ##例:

(学習ビデオ共有:

css ビデオ チュートリアル

)CSSで透明色を設定する方法

以上がCSSで透明色を設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

html5 css css3
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：CSSにはどのようなセレクターがありますか?次の記事：CSSにはどのようなセレクターがありますか?

関連記事

続きを見る