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)の形式で色と透過の数値を指定しましょう。

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

参考になったらシェアお願いします!

この記事を書いた人

■自己紹介
MEDIARCS ディレクター 河島 靖
1984年5月生まれの39歳

■趣味
銭湯・サウナ行くこと(サウナ・スパ健康アドバイザー)
筋トレ(懸垂をよりできるようになりたい)
音楽鑑賞(Nujabes、NewJeansなど)
ヴィンテージもの、レザーグッズが好き

コメントはこちらよりお願いします

コメントする

目次