最終更新日: 2021年1月24日
CSSで背景色だけ透過にする方法!文字・画像そのままで背景透過
CSSで文字・画像を透過せずに背景色だけを透過する方法を解説します。「CSSで背景色を透過しようとしてopacityプロパティを使った際に、文字やその他の要素まで透過してしまった。」という場合の対処法をサンプルコード付きで解説しています。
CSSで背景色だけ透過にしたい(文字や画像は透過させない)
下記のような「背景色を透過させようとopacity
プロパティを用いたところ、子要素の文字や画像までも透明になってしまった。」という経験が一度はあると思います。
今回は文字や画像は透過させたくない場合の方法をサンプルコード付きで解説します。この方法は様々な場面で応用できますので、ぜひマスターしてください!
CSSで背景色だけ透過にする方法
背景色だけを透過させたい場合、background-color
プロパティに対してrgba
を設定します。rgba
は以下のように記述します。
rgba
rgba(0~255,0~255,0~255,0~1)
色を示すRGBのred・green・blueと、透明度を示すalphaを設定することができます。RGBの色をそれぞれ0~255で、透明度を0(透明)~1(不透明)で指定することで、background-color
プロパティだけ透明にすることができます。
先ほどのサンプルコードの背景色のみが半透明になり、子要素である文字、画像は透過していないことを確認してください。
まとめ
CSSのみで背景色のみを透過する方法を解説しました。この方法はborder-color
プロパティや、box-shadow
プロパティ等様々な場面に応用できます。
また、今回は背景色の透過でしたが、CSSで背景画像を透過させる方法に関しては以下の記事にて紹介しています。