CSS辞典 rgb()関数、rgba()関数の解説

色をRGB・RGBaで指定するrgb()関数、rgba()関数の使用方法を記載

概要・使用方法
赤、緑、青、透明度
サンプルコード

概要・使用方法

{ プロパティ:rgb(赤,緑,青)}
{ プロパティ:rgba(赤,緑,青,透明度)}

「rgb()関数」、またはrgba()関数は、色をRGB、RGBaカラーモデルで指定することができます。透明度を指定した場合は、重なりあった領域は色が混じり合います。

赤、緑、青、透明度

赤,緑,青	RGB(赤、緑、青)の色はカンマで区切りで、それぞれ0～255の数字を指定
透明度	0～1の間の数字を指定。小数点も使用することができます。0を指定すると完全に透明になります。

サンプルコード

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>CSS rgb関数、rgba関数サンプルページ</title>
    <meta charset="uft-8">
    <style>
    .box1{
        width:300px;
        height:100px;
        background-color: rgba(255,0,0);
    }
    .box2{
        width:300px;
        height:100px;
        background-color: rgba(255,0,0,0.5);
    }
    </style>
  </head>
  <body>
      <div class="box1">rgb()関数</div>
      <div class="box2">rgba()関数</div>
  </body>
</html>

実行結果

rgb()関数

rgba()関数

chrome 実行サンプル