HTML & CSS

最終更新日:
公開日:

レシピ

エフィクト

テキストを半透明にする

テキストを透過させるための透過率の指定方法について解説します。

この記事のポイント

  • テキストを透過させるときはopacityプロパティを使う方法と、colorプロパティを使う方法がある
  • もしIE9以前の設定が必要なときはfilterプロパティを使って透過させることができる

目次

テキストに不透明度を設定する

p要素h1要素li要素などに入っているテキストは、色を設定するcolorプロパティや要素の不透明度を設定するopacityプロパティを使って、透過の具合を調整することができます。
初期は全く透過しない設定(不透明度100%)になっていますが、これらのプロパティを使って設定を行います。

不透明度 100%の表示例
不透明度 50%の表示例
不透明度 20%の表示例

colorプロパティで不透明度を設定する

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

colorプロパティの設定例

p {
	color: rgba( 255, 255, 255, 0.5);
}

色の指定についても0255の範囲で行います。

opacityプロパティで不透明度を設定する

opacityプロパティを使った不透明度の設定は、上記colorプロパティの設定と同様に0.01.0の間で指定します。
こちらの方がシンプルで使いやすいかもしれません。

opacityプロパティの設定例

p {
	color: #fff;
	opacity: 0.8;
}

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

IE9以前はopacityプロパティをサポートしていませんでしたが、Microsoftのサポートが終了してIE11への以降が進んでいるため、あまり問題になることはありません。
もしIE9への対応も必要な場合は、独自のfilterプロパティを使って同じことができます。

IE9以前の設定例

p {
	color: #fff;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
	filter: alpha( opacity=80 );
	opacity: 0.8;
}