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、その他のブラウザと互換性があります)

推薦する

React+TypeScriptプロジェクト構築事例解説

React プロジェクトの構築は非常に簡単ですが、Typescript と組み合わせると、実際にはそ...

React 関数コンポーネントのパフォーマンス最適化のアイデアの詳細な説明

最適化のアイデア最適化には主に 2 つの方向があります。再レンダリングの回数を減らします。 Reac...

Vue.jsはシンプルなタイマー機能を実装します

この記事では、参考までに、簡単なタイマー機能を実装するためのvue.jsの具体的なコードを紹介します...

MySQL の union と union all の簡単な分析

データベースでは、UNION キーワードと UNION ALL キーワードの両方が 2 つの結果セッ...

Reactでコンポーネントがどのように通信するかの詳細な説明

1. 何ですかコンポーネント間の通信は、次の 2 つの単語に分けることができます。コンポーネントコ...

linxu での Svn ワンクリック インストール シェル スクリプトの詳細な説明

#!/bin/bash #SVNをダウンロード yum -y サブバージョンをインストールします ...

MySQL マスター スレーブ データが矛盾しています。プロンプト: Slave_SQL_Running: 解決策はありません

この記事では、MySQL マスターとスレーブ データ間の不一致の解決方法と、プロンプト「Slave_...

この記事ではJavaScriptの基本であるディープコピーとシャローコピーについて説明します。

目次浅いコピーディープコピー補充する要約するコピー(クローン、複製などとも呼ばれる)ですが、ディープ...

Apache Bench で Web ストレス テストを実装する方法

1. Apache Benchの紹介ApacheBench は、Apache サーバーに付属する W...

DockerとDocker-Composeの使用例

Docker は、アプリケーションをより速く配信するのに役立つオープンソースのコンテナ エンジンです...

JavaScript の実行コンテキストとコールスタックの詳細な説明

目次1. 実行コンテキストとは何か2. 実行コンテキスト スタックとは何ですか? 3. 実行コンテキ...

ZooKeeper をベースにした Hadoop 高可用性クラスタの構築のチュートリアル図

目次1. 高可用性の概要1.1 可用性の高い全体アーキテクチャ1.2 QJMに基づく共有ストレージシ...

すべてのブラウザとの完全な互換性を実現するために最適なプリセットを選択してください

各ブラウザの select タグのプロパティと各ブラウザのサポートが多少異なるため、各ブラウザでの選...

Linuxでポートが開いているかどうかを確認する方法のまとめ

方法1: lsofコマンドを使用するlsof コマンドを使用して、ポートが開いているかどうかを確認で...

CSS3 オーバーフロープロパティの説明

1. オーバーフローOverflow はオーバーフロー(コンテナ)です。コンテンツがコンテナを越える...