CSSで要素(背景/文字)を透過する方法【opacityとrgbaの違い】

CSSプロパティのopacityとrgbaについて忘備録を兼ねつつ解説したいと思います。

この2つのプロパティを使うと、要素を透過させることが出来ます。

どちらのプロパティを使っても、要素を透過する事ができますが、挙動が違います。

子要素の背景、文字、画像、borderも含めて透過させたい場合はopacity。

背景、文字、画像、borderなどを個別に透過させたい場合はrgbaを使用します。

PR

opacityを使った透過処理

opacityプロパティを使えば要素を透過する事が出来ます。

opacityプロパティを指定した場合、指定した要素の子要素も透過処理されます。

親要素だけでなく、子要素の背景、文字、画像、borderも同時に透過したい場合に使うと楽ちんです。

指定した要素の中身もまるっと透過処理できる。

実際に試してみた

opacityの値に「0.1、0.5、1.0」を指定し、3つのブロック要素に反映しました。

/* opacityは0.0(透明)～1.0(不透明)までの値を設定する事ができます */
.opacity1{
	opacity:0.1;
}
.opacity5{
	opacity:0.5;
}
.opacity10{
	opacity:1.0;
}

/* 透過処理をわかりやすくするためのブロック要素 */
.gray_box{
	padding:20px 0;
	background-image: url("https://junk-blog.com/wp-content/uploads/2015/02/touka_bk.jpg");
	margin:15px auto;
	width:100%;
}
.test_box{
	width:80%;
	margin:15px auto;
	padding:30px;
	border:solid 1px #000;
}

.white{
	background-color:#FFF;
}

<div class="gray_box">
	<div class="test_box white opacity1">
		【opacity:0.1】モジモジ文字文字もじもじ
	</div>
	<div class="test_box white opacity5">
		【opacity:0.5】モジモジ文字文字もじもじ
	</div>
	<div class="test_box white opacity10">
		【opacity:1.0】モジモジ文字文字もじもじ
	</div>
</div>

rgbaを使った透過処理

opacityプロパティは内包する子要素を含めて透過処理されるプロパティでした。

rgbaプロパティを使えば背景、文字、画像、borderなど個別に透過することができます。

文字は透過させず、背景のみ透過させたい場合などに使うといいでしょう。

/* 例 */
	/* 背景を透過 */
	background-color:rgba(255,255,255,0.5);

	/* borderを透過 */
	boder-color:rgba(255,255,255,0.5);

	/* pタグの文字を透過 */
	p{color:rgba(255,255,255,0.5);}

色と透明度の値

rgbaプロパティには【赤の値、緑の値、青の値、透明度】の4つを指定することができます。

色の値には「0～255」までの値をそれぞれ指定することができ、透明度には「0.0(透明)～1.0(不透明)」の値を設定することができます。

rgba(0-255[赤の値],0-255[緑の値],0-255[青の値],0.0-1.0[透明度])

RGB（またはRGBカラーモデル）とは、色の表現法の一種で、赤 (Red)、緑 (Green)、青 (Blue) の三つの原色を混ぜて幅広い色を再現する加法混合の一種である。

RGB – Wikipedia

rgba(red,green,blue,alpha)の頭文字と覚えれば、色の値を指定する際に混乱しにくいのではないでしょうか。

rgb3つの色をさっと調べたい時には、下記のサイトが便利でした。

実際に試してみた

rgbaプロパティを使って、文字は透過させずに背景だけ透過させてみたいと思います。

/* alpha(色の透明度)は0.0(透明)～1.0(不透明)までの値を設定する事ができます */
.rgba1{
	background-color:rgba(255,255,255,0.1);
}
.rgba5{
	background-color:rgba(255,255,255,0.5);
}
.rgba10{
	background-color:rgba(255,255,255,1.0);
}

/* 透過処理をわかりやすくするためのブロック要素 */
.gray_box{
	padding:20px 0;
	background-image: url("https://junk-blog.com/wp-content/uploads/2015/02/touka_bk.jpg");
	margin:15px auto;
	width:100%;
}
.test_box2{
	width:80%;
	margin:15px auto;
	padding:30px;
	border:solid 1px #000;
}

<div class="gray_box">
	<div class="test_box rgba1">
		【rgba(255,255,255,0.1)】モジモジ文字文字もじもじ
	</div>
	<div class="test_box rgba5">
		【rgba(255,255,255,0.1)】モジモジ文字文字もじもじ
	</div>
	<div class="test_box rgba10">
		【rgba(255,255,255,0.1)】モジモジ文字文字もじもじ
	</div>
</div>