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

css辞典 CSS辞典
この記事は約3分で読めます。

色を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 実行サンプル

rgb()関数、rgba()関数のchromeブラウザの実行結果

Firefox 実行サンプル

rgb()関数、rgba()関数のfirefoxブラウザの実行結果

edge 実行サンプル

rgb()関数、rgba()関数のedgeブラウザの実行結果

opera 実行サンプル

rgb()関数、rgba()関数のoperaブラウザの実行結果

コメント

タイトルとURLをコピーしました