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

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 をよろしくお願いいたします。

<<:  MySql8.0 のトランザクション分離レベルエラーの問題を解決する

>>:  ウェブページを白黒に変換します(Google、Firefox、IE、その他のブラウザと互換性があります)

推薦する

CentOS 7にChromeブラウザをインストールする方法

この記事では、CentOS 7 に Chrome ブラウザをインストールする方法を紹介します。詳細は...

MySQL 8の新機能である降順インデックスの基礎となる実装の詳細な説明

降順インデックスとは何ですか?インデックスについてはよくご存知かもしれませんが、降順インデックスにつ...

TLS暗号化通信を使用してDockerにリモート接続する詳細な例

デフォルトでは、Docker はネットワーク化されていない UNIX ソケット上で実行されます。オプ...

Navicat 接続 MySQL エラーの説明分析

目次環境仮想マシンバージョンMySQL バージョン事前準備MySQLの実行ステータスを確認するルート...

jsは、州、市、地区の3レベルのリンクの非選択ドロップダウンボックスバージョンを実現します。

インターネットで3レベルリンクを検索したところ、すべてオプションで書かれていました。突然、別の方法で...

シェルでパスワードなしでMySQLデータベースに素早くログインする方法

背景Shell の mysql-client を介して MySQL データベースにログインする場合、...

Vueコンポーネントの詳細な説明

<本文> <div id="ルート"> <h2&...

MySQL で不明なフィールド名を回避する方法

序文この記事では、DDCTF の 5 番目の質問、つまり不明なフィールド名をバイパスする手法を紹介し...

Vue v-onディレクティブの使用について

目次1. イベントのリスニング2. イベントパラメータを渡す3. イベント修飾子ケース1: クリック...

js を使ってシンプルな虫眼鏡効果を実現

この記事の例では、参考までに簡単な虫眼鏡効果を実現するためのjsの具体的なコードを共有しています。具...

さまざまなネットワーク画像形式におけるPNGの利点の詳細な説明

BMP は、ハードウェア デバイスに依存せず、広く使用されている画像ファイル形式です。ビットマップ保...

Vueモバイル端末は画面上で指をスライドさせる方向を判定する

vueモバイル端末は、画面上で指をスライドさせる方向を判断します。具体的な内容は次のとおりです。これ...

nginx は画像表示の遅さとダウンロードの不完全さの問題を解決します

前面に書かれた最近、ある読者から、ブラウザからサーバーにアクセスすると、画像の表示が遅く、ブラウザに...

node.js チュートリアルの Util モジュールの例の詳細な説明

目次タイプ判定から始める厳格な平等エラーファーストと約束デバッグと出力タイプ判定から始めるJavaS...

CSS3 引用のソースと出典をマークする方法

疫病のせいで家にこもりきりで、頭がおかしくなりそうなので、パソコンを起動して頭を働かせてみました。今...