CSSで背景色だけ透過にする方法!文字・画像そのままで背景透過

CSSで文字・画像を透過せずに背景色だけを透過する方法を解説します。「CSSで背景色を透過しようとしてopacityプロパティを使った際に、文字やその他の要素まで透過してしまった。」という場合の対処法をサンプルコード付きで解説しています。

コンテンツ [表示]

  1. 1CSSで背景色だけ透過にしたい(文字や画像は透過させない)
  2. 2CSSで背景色だけ透過にする方法
  3. 3まとめ

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の色の指定方法をサンプルコード付き解説!のイメージ
CSSの色の指定方法をサンプルコード付き解説!
CSSの色の指定方法は「キーワード」「カラーコード」「RGB」「HSL」など複数あります。それぞれの色の指定の仕方についてサンプルコード付きで解説します。

まとめ

CSSのみで背景色のみを透過する方法を解説しました。この方法はborder-colorプロパティや、box-shadowプロパティ等様々な場面に応用できます。

また、今回は背景色の透過でしたが、CSSで背景画像を透過させる方法に関しては以下の記事にて紹介しています。

あわせて読みたい
CSSで背景画像を透過させる方法をサンプルコード付き解説!のイメージ
CSSで背景画像を透過させる方法をサンプルコード付き解説!
CSSで背景画像を透過させる方法をサンプルコード付き解説します。CSSで背景画像を透過させてオシャレなWEBページを作成したいという時があります。その方法についてここでは解説します。
GeekHive採用サイト

関連記事