テキストを半透明にする

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

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

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

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

colorプロパティの設定例

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

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

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

opacityプロパティを使った不透明度の設定は、上記colorプロパティの設定と同様に0.0〜1.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;
}

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

コメントありがとうございます！
運営の参考にさせていただきます。