css3のrgbaとは何ですか

rgbaはCSS3で色を定義する関数で、構文は「rgba(R,G,B,A)」となり、赤(R)、緑(G)、青(B)、透明度を表します。 . (A) 相互に変化して重ね合わせることでさまざまな色が得られます; パラメータ R、G、B の値の範囲は「0 ～ 255」、A の値の範囲は「0 ～ 1」です。

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

RGBとは、赤(R)、緑(G)、青(B)を変化させ重ね合わせて得られる様々な色を表す色の標準です。 RGBA は RGB に基づいており、アルファ透明度を制御するパラメータを追加します。

構文:

rgba(R,G,B,A)

パラメータ:

R: 赤色の値。正の整数 | パーセント

G: 緑色の値。正の整数 | パーセント

B: 青色の値。正の整数 | パーセント

A: 透明度。 0 から 1 までの値の範囲

#値の範囲:

:色相 (色相)。 0 (または 360) は赤を表し、120 は緑を表し、240 は青を表します。もちろん、他の値を使用して他の色を決定することもできます;

: 彩度(彩度)。値は 0% ～ 100% の値です;

: 明度 (明るさ)。値は 0% ～ 100% の値です;

: アルファ (透明度)。値は 0 ～ 1 です。

簡単な説明:

RGB カラー モード (「赤、緑、青」とも訳されますが、あまり一般的には使用されません) は、工業用 赤（R）、緑（G）、青（B）の 3 つの色チャネルを変化させて重ね合わせることでさまざまな色を得る色規格で、RGB は赤、緑、青の 3 つのチャネルの色を表します。青、この標準には人間の視覚が認識できるほぼすべての色が含まれており、現在最も広く使用されている表色系の 1 つです。

RGBA には、RGB に基づいてアルファ透明度を制御するための追加パラメータがあります。上記の 3 つのパラメータ R、G、B の正の整数値の範囲は 0 ～ 255 です。パーセンテージ値の範囲は 0.0% ～ 100.0% です。範囲外の値は、最も近い値の制限に丸められます。すべてのブラウザがパーセント値の使用をサポートしているわけではありません。 A パラメータの値は 0 ～ 1 であり、負の値にすることはできません。

ブラウザの互換性:

Pang Tong が RGBA は透明な色 (透明な背景色、透明な境界線の色、透明な前景色など) を作成するためのものだと言う場合, 誰もが不透明性について考えずにはいられません。通常、CSS2 の背景色を作成するために使用されますが、境界線の色や前景色を作成するために使用したい場合は、横に立つことしかできず、無力です。

さあ、RGBA と不透明度の比較例を見てみましょう。HTML コード:

<div class="example-opacity">
  <p>Opacity效果</p>
  <ul>
   <li class="opacity opacity1">100%</li>
   <li class="opacity opacity2">80%</li>
   <li class="opacity opacity3">60%</li>
   <li class="opacity opacity4">40%</li>
   <li class="opacity opacity5">20%</li>
   <li class="opacity opacity6">0</li>
  </ul>
  <p>CSS3的RGBA效果</p>
  <ul>
   <li class="rgba rgba1">1</li>
   <li class="rgba rgba2">0.8</li>
   <li class="rgba rgba3">0.6</li>
   <li class="rgba rgba4">0.4</li>
   <li class="rgba rgba5">0.2</li>
   <li class="rgba rgba6">0</li>
 </ul>
</div>

これら 2 つの ul の li にそれぞれ関連するスタイルを適用します。li.opacity では、 CSS2 では Opacity を使用し、li.rgba では CSS3 の新しい RGBA プロパティを使用します。

不透明度スタイル

li.opacity{
  float: left;
  width: 50px;
  height: 50px;
}
li.opacity1 {
   background: rgb(255,255,0);
   opacity: 1;
   filter:alpha(opaity=100);
}
li.opacity2 {
  background: rgb(255,255,0);
  opacity: 0.8;
  filter:alpha(opaity=80);
}
li.opacity3 {
  background: rgb(255,255,0);
  opacity: 0.6;
  filter:alpha(opaity=60);
}
li.opacity4 {
  background: rgb(255,255,0);
  opacity: 0.4;
  filter:alpha(opaity=40);
}
li.opacity5 {
  background: rgb(255,255,0);
  opacity: 0.2;
  filter:alpha(opaity=20);
}
li.opacity6 {
  background: rgb(255,255,0);
  opacity: 0;
  filter:alpha(opaity=0);
}

RGBAサンプル:

li.rgba {
  float: left;
  width: 50px;
  height: 50px;
}
li.rgba1 {
  background: rgba(255,255,0,1);
}
li.rgba2 {
  background: rgba(255,255,0,0.8);
}
li.rgba3 {
  background: rgba(255,255,0,0.6);
}
li.rgba4 {
  background: rgba(255,255,0,0.4);
}
li.rgba5 {
  background: rgba(255,255,0,0.2);
}
li.rgba6 {
  background: rgba(255,255,0,0);
}

その効果を見てみましょう:

効果 これらの類似点は背景色がまったく同じであることがわかりますが、違いは常に誰もが頭を悩ませている問題です。つまり、Opacity の子孫要素はそれに伴って透明度を持ちます。そのため、不透明度の単語には透明度の値も含まれますが、ドロップはますます不鮮明になりますが、RGBA にはそのような問題はありません。

(学習ビデオ共有: css ビデオ チュートリアル 、Web フロントエンド )

以上がcss3のrgbaとは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。