opacityで背景だけ透過させて文字は透過させないCSSの書き方の紹介

CSSでopacityを使った透過の方法を2種類記します。

透過なし

See the Pen MGxLJJ by kawashima (@kawashima) on CodePen.

これは透過してない状態。

タンメン画像の上に青い背景と文字があります。

文字も背景も透過

See the Pen erXxMe by kawashima (@kawashima) on CodePen.

手っ取り早くopacityを使用すると文字も透過しちゃいます！

文字はそのままにしたい場合は下をご参照下さい。

背景だけ透過。文字は透けない。

See the Pen erXxre by kawashima (@kawashima) on CodePen.

色指定する際にrgba(0,0,255,0.7)の形式で色と透過の数値を指定しましょう。

これで文字はそのままで背景が透けます。