ゆるミニマリストの愛用品リストCLICK

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

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

10秒でわかる!"超節約系"サービス

① コスパ最強。200万冊以上の本が好きなだけ読み放題

▶▶ Kindle Unlimited

③ 配送無料で年間5万円以上も節約。動画も音楽も好きなだけ

▶▶ Amazonプライム

10秒でわかる!
"超節約系"サービス

① コスパ最強。200万冊以上の本が好きなだけ読み放題

▶▶ Kindle Unlimited

③ 配送無料で年間5万円以上も節約。動画も音楽も好きなだけ

▶▶ Amazonプライム

もくじ

透過なし

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

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

\ 人気商品が日替わりで!毎日お得なタイムセール/


  • URLをコピーしました!
もくじ