CSS3 rgb と rgba (透明色) の使い方の詳しい説明

誰もが色にとても敏感だと思います。私たちの目が見るところにはどこにでも色があります。では、CSS で色を表すには何を使用すればよいのでしょうか? CSS で色を定義する方法は 3 つあります。カラー メソッド (RGB、RGBA、HSL、HSLA)、16 進数のカラー値、定義済みのカラー名の使用です。 RGB と RGBA をよく使用します。それでは、それらの違いについてお話ししましょう。

rgbとrgbaの意味

RGBは、Red (赤)、Green (緑)、Blue (青) の略語です。 RGBAカラー値は RGB カラー値の拡張であり、オブジェクトの不透明度を指定するアルファ チャネルが追加されています。

1. 基本的な構文:
R: 赤の値。 正の整数 (0~255) またはパーセンテージ (0.0% - 100.0%)
G: グリーン値。 正の整数 (0~255) またはパーセンテージ (0.0% - 100.0%)
B: 青の値。 正の整数 (0~255) またはパーセンテージ (0.0% - 100.0%)
A: 透明性です。値は 0 から 1 までの範囲で、負の値にはなりません。

RGBカラー値の検索については、https://www.sioe.cn/yingyong/yanse-rgb-16/を参照してください（16進数はCSSでさまざまな色を表すためにも使用でき、さまざまな色の16進値もこのWebサイトで見つけることができます）。

2. ブラウザの互換性:

RGB対応:

RGBA対応:

http://caniuse.com/ この Web サイトを使用すると、使用したい属性のブラウザ互換性の問題を確認できます。

3. rgbとrgbaの書き方

rgbの書き込み形式: rgb(90,50,25);

で最初の数字（90）は赤色（赤の値）を表します。 2番目の数字（50）は緑色（緑の値）を表します。 3番目の数字（25）は青色（青の値）を表します。数字が大きくなるほど（255 以下）、対応する色が追加されます。

rgba の記述形式: rgba(90,50,25,0.5);

上記から、 RGBAカラー値は RGB カラー値の拡張であり、オブジェクトの不透明度を指定するアルファ チャネルが追加されていることがわかります。最初の 3 つの値は、rgb で表される値と同じです。a の値は 0 から 1 の間で、0 は透明色、1 は不透明、0.5 は各色 (R、G、B) の 50% の透明度、つまり各色が半透明であることを表します。ここでの a は .5 と省略することもできます。小数点の透明性がある限り、このように省略することができます。

RGBとRGBAの違い

1. rgb+不透明度（IEとは互換性がありません）
rgba の a はオブジェクトの透明度を表すため、ここでは rgb と rgba の違いを示すために、不透明度属性 (これも透明度を表す) + rgb が使用されます。不透明度属性は、filter 属性を使用して表現することもできます。たとえば、filter:Alpha(opacity=50) で、50 は 50% の透明度を表します。以下にいくつか例を挙げます。

<div class="box">
	<p>rgb+不透明度:</p>
	<div class='one'>25%</div>
	<div class='two'>50%</div>
	<div class='three'>75%</div>
	<div class='four'>100%</div>
</div>

。箱{
	下マージン: 10px;
	オーバーフロー: 非表示;	
}
.box>div{
	幅:100ピクセル;
	高さ:100px;
	フロート: 左;
}
.box>div{
	背景:rgb(255,0,0)
}
.box>.on​​e{
	不透明度:.25;
}
.box>.2{
	不透明度:.5;
}
.box>.three{
	不透明度:.75;
}
.box>.4{
	不透明度:1
} 

上記の例から、透明度が変化すると、div が透明になり、div 上のテキストも透明になり、不明瞭になっていくことがわかります。

2. RGBA

rgba の a はオブジェクトの透明度を表すため、透明度の問題を説明するために rgba で background を直接使用できます。以下にいくつか例を挙げます。

<div class="box1">
	<p>RGBA</p>
	<div class='one'>25%</div>
	<div class='two'>50%</div>
	<div class='three'>75%</div>
	<div class='four'>100%</div>
</div>

```css
.box1>div{
	幅:100ピクセル;
	高さ:100px;
	フロート: 左;
}
.box1>.one{
	背景:rgba(255,0,0,1);
}
.box1>.2{
	背景:rgba(255,0,0,.75);
}
.box1>.three{
	背景:rgba(255,0,0,.5);
}
.box1>.4{
	背景:rgba(255,0,0,.25);
} 

上記の例から、透明度が変化すると div が透明になり、div 上のテキストは透明度の影響を受けず、テキストの元の色が維持されることがわかります。

RGBA は背景に適用できるだけでなく、色が設定されている場所であればどこでも使用できます。次に例をいくつか示します。

1 つ目は、フォントの色です。色を設定するときに透明度を設定できます。

<p class="p1">フォントの色</p>
<p class="p2">フォントの色</p>

.p1{
	色:rgb(255,0,0)
}
.p2{
	色:rgba(255,0,0,.5)
} 

2番目: 境界線の色 border-color

<div class="div3"></div>
<div class="div4"></div>

.div3,.div4{
	幅:100ピクセル;
	高さ:100px;
	背景:#f00;
}
.div3{
	境界線:5px 実線 rgb(0,0,0)
}
.div4{
	境界線:5px 実線 rgba(0,0,0,.2)
} 

3番目のタイプ: フォントの影の色 text-shadow

 <p class="p1">フォントの影の色</p>
<p class="p2">フォントの影の色</p>

.p1{
	テキストシャドウ:1px 2px 1px rgb(255,0,0);
}
.p2{
	テキストシャドウ:1px 2px 1px rgba(255,0,0,.5);
} 

4番目: 境界線の影の色を変更する

<div class="div3"></div>
<div class="div4"></div>

.div3,.div4{
	幅:100ピクセル;
	高さ:100px;
	背景:#000;
}
.div3{
	ボックスの影: 1px 5px 5px rgb(255,0,0);
	下マージン: 20px;
}
.div4{
	ボックスの影: 1px 5px 5px rgba(255,0,0,.5);
} 

要約する

1. 上記の例から、単一の色は要素全体の透明度に影響を与えないため、RGBA は要素の CSS 透明度を設定するよりも優れていることもわかります。境界線やフォントなど、要素の他の属性には影響せず、他の要素の関連する透明度にも影響しません。

2. 透明度には不透明度を使用します。親要素で不透明度を使用すると、他の子要素に影響します。

3. 最後に、RGBA メソッドは RGBA 属性をサポートするブラウザーでのみ正常に表示されることをお伝えしておきます。

CSS3 rgb と rgba (透明色) の詳しい使い方については、これで終わりです。CSS3 rgb と rgba に関するその他の関連コンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。