2022.07.20
Chromeで画像やテキストがぼやけるときの対処法
コーディング
制作
2021.04.06
以下のように文字をボックスで囲って背景色をつけることはよくあると思います。
See the Pen box by spiqa design (@spiqa_design) on CodePen.
本日は、この背景色を透過するときの注意点についてご紹介します。
目次
CSSで色を「透過」する場合にはopacity
を使用すると思います。
先程の例にopacity
のスタイルをあててみると以下のようになります。
See the Pen opacity by spiqa design (@spiqa_design) on CodePen.
想定どおり背景色は透過できましたが、文字も透過されてしまっているので読みづらくなってしまいました。
opacity
を用いると文字色も透過されてしまったため、background
の色指定をrgbaに変更してみます。
See the Pen rgba by spiqa design (@spiqa_design) on CodePen.
こちらの指定で文字色は透過せずに、背景色のみを透過することができました。
rgb
の値は、色コードをGoogle検索するなどによって簡単に把握することができます。
場面に応じて、要素の全体を透過したい場合はopacity
を指定する、文字の視認性を下げない方が良い場合はrgba
を指定すると使い分けるようにすると良いですね。
こちらもおすすめ