RGBAカラーの指定を指定するには?
値の書式
rgba(【赤】, 【緑】, 【青】, 【不透明度】 )
対応ブラウザ
引数一覧
| 引数 | 内容 |
| 赤 | 指定する色の赤色の成分を指定します。値として0から255の整数か、0%から100%のパーセント値が使用できます。 |
| 緑 | 指定する色の緑色の成分を指定します。使用できる値は赤と同じです。 |
| 青 | 指定する色の青色の成分を指定します。使用できる値は赤と同じです。 |
| 不透明度 | 指定する色の透明・不透明の度合いを指定します。
0から1.0の実数値で指定し、0で完全に透明になり、1.0で完全に不透明になります。 |
解説文
プロパティの値として色を指定するにはいくつか方法がありますが、rgba()を使用すると、赤、緑、青、不透明度の各要素を表す数値によって、色指定を行うことができます。
赤、緑、青の各要素は、0から255までの整数か、0%から100%までのパーセント値で指定します。
なお、赤、緑、青の部分の指定では、「整数による指定」か「パーセント値による指定」か、どちらか一方の指定方法で統一する必要があります。一度の指定のなかで、二つの指定方法を混ぜることはできません。
不透明度はアルファ値ともいい、0から1.0までの実数値で指定します。0が透明で、1.0が完全に不透明です。
rgb()による指定との相違点は、16進表記による指定が使用できないということです。
たとえば以下のように指定すると、完全に不透明な赤を指定したことになります。
rgba(255,0,0,1)
サンプルソース
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
div.box{
width:100px;
height:100px;
position:absolute;
text-align:center;
}
div#box1 {
left:10px;
top:10px;
background-color:rgba(100%,0%,0%,1); /* 完全に不透明な赤 */
}
div#box2 {
left:100px;
top:100px;
background-color:rgba(120,0,120,0.5);/* 半透明の紫 */
}
div#box3 {
left:190px;
top:190px;
background-color:rgba(0%,0%,0%,0.1);/* 透明な黒 */
}
</style>
</head>
<body>
<div id="box1" class="box">完全に不透明な赤</div>
<div id="box2" class="box">半透明の紫</div>
<div id="box3" class="box">透明な黒</div>
</body>
</html>
関連項目
（関連項目はありません）
