RGBAとOpacity_html/css_WEB-ITnoseの違いの簡単な説明

前回の記事：「Pure CSSでシルバーのMacBook Airを作る(2)」

RGBAとOpacityはどちらも透明度に関係しますが、両者の違いは何でしょうか？もしかしたら今は考えられない友達もいるかもしれませんが、それは問題ではありません、ただ静かに下を向いてください。

まず RGBA について簡単に見てみましょう:

構文

rgba(r,g,b,a)

値の説明

R: 赤の値。正の整数 | パーセント
G: 緑色の値。正の整数 | パーセント
B: 青色の値。正の整数 | パーセント
A: アルファの透明度。値は 0 ～ 1 です。
正の整数は 10 進数で 0 ～ 255 の任意の値、パーセンテージは 0% ～ 100% の任意の値です。

RGBA は、R (赤) G (緑) B (青) モードにアルファ チャネルを追加します。アルファ チャネルは 不透明度、つまり、要素のアルファ チャネル値が 0% (または 0) の場合、要素は完全に透明です (つまり、見えませんが、その下の要素は要素を通して見えます)。値が 100% (または 255) の場合、要素は完全に 不透明 であることを意味します。

もう一度不透明度を見てみましょう:

構文

opacity: value|inherit;

値の説明

value:不透明度、0.0 (完全に透明) から 1.0 (完全に不透明) ）。

ヒント: IE8 以前では、代替フィルター属性がサポートされています。例: フィルター:アルファ(不透明度=50)。

ここをクリックすると、さまざまな不透明度値の効果を表示できます。

RGBA と opacity は両方とも要素の不透明度を設定するために使用されますが、この 2 つの違いは何ですか?

違い

opacityは親要素の不透明度属性を継承しますが、RGBAで設定された要素の子孫要素は不透明度属性を継承しません。 この 2 つの違いは、ここ をクリックして表示するか、codepen で属性値を変更して他の不透明度での効果を確認するか、以下の実装とテクスチャ効果を直接確認することができます:

   		.rgba{		background: rgba(255,0,0,0.5);	}	.opacity{		background: red;		opacity: 0.5;	}

画像からもわかります ご覧のとおり、Opacity属性が設定されたdiv内のテキストも半透明ですが、RGBA属性が設定されたdiv内のテキストは透明度を継承しません。

注: この例の RGBA と Opacity の不透明度の値は両方とも 0.5 です。

したがって、RGBA は依然として Opacity よりも優れています。もちろん、上で使用した背景色、テキストシャドウ、ボックスシャドウなど、色に関係するものはすべて RGBA を使用して設定できます。

ちょっとした注意: この記事は Markdown + 少量の HTML によって編集されています 次の記事: 「Pure CSS でシルバーの MacBook Air を作成する (2)」