CSSを上書きで背景色なしにする方法をご紹介！

CSSを上書きで背景色なしにする方法を身に付けることで、例えばPC画面とスマホ画面で見た目を変えたいといった時や、別のライブラリで強制的についている背景色を消したいといった時に役立ちます。

ここでは以下の背景色を「CSSを上書きで背景色なしにする方法」を用いて実現させてみたいと思います。

ではCSSを上書きで背景色なしにする方法について2通り紹介します。

どちらも行っていることは、CSSを上書きでbackground-colorを透明にしているだけですが、後者の方が簡単なので個人的にオススメです。

background-color: rgba(0,0,0,0);は背景色を透明にするための記述です。

このようにCSSを上書きで背景色なしという状態になったため、何も表示されなくなりました。

先程のbackground-color: rgba(0,0,0,0);と行っていることは同じなのですが、background-color: transparent;の方がぱっと見て何をしているのか分かりやすいですし、記述としてもこちらの方が簡単なのでオススメです。

このように背景色がなくなったため何も表示されなくなりました。

いかがでしたでしょうか？

ぜひここで紹介した方法を身に付けて、WEBサイト制作の時などに役立ててください。