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ブラウザ実行結果
Firefox ブラウザ実行結果
edgeブラウザ実行結果
operaブラウザ実行結果
