HTML STUDY
>
>

RGBA値で背景を半透明にする

ここではCSSでRGBA値を入力して背景を半透明にする方法を解説していきます。RGBA値を反映できないブラウザには無効なので注意してください。

RGBA

CSSプロパティbackground-colorの値にrgbaを入力すると、背景の色を半透明にすることができます。rgba()内にRED,GREEN,BLUEの値を0～255の数値で設定し、[,]で区切ります。４つ目の値に透過性の値を0～1の間の数値で指定します。0が透明、1が不透明となります。

透明度がわかりやすいように、下の画像を背景にして、さらにその中に白の半透明の背景を設定したいと思います。

背景サンプル
bg-sample.jpg(50×50px)

なお、rgba値を表示できないブラウザには透明度が表示されないだけではなく、色そのものが表示されません。その事も配慮してデザイン設定をした方がよいかと思われます。

CSSプロパティ解説
background-color背景に色を設定する
background-image背景に画像を設定する
background-colorの値解説
rgba赤、緑、青、透明度

HTMLコード記述例

<div class="bg-img">
<div class="bg-rgba">
<p>背景を白、透過性を0.8</p>
</div>
</div>

外部ファイルCSS記述例

@charset "utf-8";

div.bg-img {
 background-image:url(../img/bg-sample.jpg);
 padding: 10px;
}

div.bg-rgba {
 background-color:rgba(255,255,255,0.8);
 width: 200px;
 height: 200px;
 margin: auto;
 text-align: center;
}

div.bg-rgba p {margin: 0;}

ブラウザ表示例

背景を白、透過性を0.8

CSSボックス 関連記事