CSS

2021.04.07

【CSS】背景色のみを透過する方法

以下のように文字をボックスで囲って背景色をつけることはよくあると思います。

See the Pen box by spiqa design (@spiqa_design) on CodePen.

本日は、この背景色を透過するときの注意点についてご紹介します。

opacityを使って透過する

CSSで色を「透過」する場合にはopacityを使用すると思います。
先程の例にopacityのスタイルをあててみると以下のようになります。

See the Pen opacity by spiqa design (@spiqa_design) on CodePen.

想定どおり背景色は透過できましたが、文字も透過されてしまっているので読みづらくなってしまいました。

rgbaを用いて透過する

opacityを用いると文字色も透過されてしまったため、backgroundの色指定をrgbaに変更してみます。

See the Pen rgba by spiqa design (@spiqa_design) on CodePen.

こちらの指定で文字色は透過せずに、背景色のみを透過することができました。

まとめ

rgbの値は、色コードをGoogle検索するなどによって簡単に把握することができます。
場面に応じて、要素の全体を透過したい場合はopacityを指定する、文字の視認性を下げない方が良い場合はrgbaを指定すると使い分けるようにすると良いですね。

こちらもおすすめ

0

関連記事

  • 2021.04.09

    コーディング作業に役立つサイト5選

    CSS

    その他

  • 2021.03.31

    【HTML・CSS】納品前に確認したいコーディングチェックポイント

    CSS

    HTML5

  • text-alignがズレてしまうとき

    2021.03.24

    【CSS】text-alignがズレてしまうとき

    CSS

おすすめ記事

  • 2019.03.15

    【WordPress】固定ページにページネーションを効かせる方法

    WordPress

  • 2019.02.08

    【css】IEにobject-fitを簡単に効かせる方法

    CSS

  • コーディングで画像を好きな形に切り抜く方法

    2021.02.10

    【CSS】コーディングで画像を好きな形に切り抜く方法【IEにも対応】

    CSS

株式会社スピカデザイン

渋谷のWEB制作会社「スピカデザイン」の現役コーダー達が、WEB制作のヒントになるような情報をお届けします。

https://spiqa.design/

spiqa_design

質問・感想などはこちら!

REQUEST

ご意見、感想や記事のリクエストなど
メッセージお待ちしております!