レシピ

要素を透過させる

  • このエントリーをはてなブックマークに追加

要素に不透明度を指定して透過させる方法を解説します。子要素の透過を防ぐ方法についてもご紹介。

この記事のポイント

  • 要素を透過させる
  • 親要素のみ透過させて、子要素は透過させないようにする

目次

要素に不透明度を設定する

HTMLの全要素は不透明度を設定することができます。
初期は全く透過しない設定(不透明度100%)になっていますが、background-colorプロパティopacityプロパティで設定を行います。

2つのプロパティの違いは、子要素も含めて透過させるかです。
次の表示例は、それぞれのプロパティで不透明度を設定したものです。

background-colorプロパティ

background-colorプロパティの設定例
background-colorプロパティの設定例

opacityプロパティ

opacityプロパティの設定例
opacityプロパティの設定例

background-colorプロパティは親要素のみ透過をしていますが、opacityプロパティは子要素も含めて透過を適用しています。
このように、親要素にあわせて子要素も透過させるか、または子要素には影響しない形にするかでプロパティを使い分けます。

background-colorプロパティで設定する

background-colorプロパティで不透明度を設定するには、「rgba指定」を使います。
rgbaとは、r(赤)、g(緑)、b(青)、a(不透明度)の4つの値を指定する方法です。
この最後のaに任意の不透明度を0.01.0の間で指定します。

色の指定は0255の範囲で行います。

background-colorプロパティの設定例

div {
	background-color: rgba( 255, 255, 255, 0.5);
}

opacityプロパティで設定する

opacityプロパティを使った不透明度の設定は、不透明度のみを0.01.0の間で指定します。
こちらの方が指定はシンプルです。

opacityプロパティの設定例

div {
	background-color: #fff;
	opacity: 0.5;
}

こちらの方法だとテキストの色をcolorプロパティで行い、不透明度はopacityプロパティで行うと役割分担ができます。

IE9以前はopacityプロパティをサポートしていませんが、独自のfilterプロパティを使って同じように透過を設定するができます。

IE9以前の設定例

div {
	background-color: #fff;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
	filter: alpha( opacity=50 );
	opacity: 0.5;
}
  • このエントリーをはてなブックマークに追加
前のページへ 一覧ページへ一覧 次のページへ