レシピ

テキストを半透明にする

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

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

この記事のポイント

  • テキストを透過する2種類の方法が分かる
  • IE9以前の設定例も解説

目次

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

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

不透明度 100%の表示例
不透明度 100%の表示例
不透明度 50%の表示例
不透明度 50%の表示例
不透明度 20%の表示例
不透明度 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;
}

こちらの記事は役に立ちましたか?

ありがとうございます。
もしよろしければ、あわせてフィードバックや要望などをご入力ください。

ありがとうございます。
コメントを送信しました。

  • このエントリーをはてなブックマークに追加
前のページへ 一覧ページへ一覧 次のページへ