背景色を透過するCSS (opacityとrgba)

はじめに

Railsでオリジナルアプリ制作中、サイドバー部分を実装しました。

sample.html.erb(抜粋)

<div class="side-bar-upper">
 <h2><%= current_user.nickname %></h2>
</div>

sample.css(抜粋)

.side-bar-upper {
  width: 90%;
  height: 50px;
  margin: 5px auto;
  padding: 5px;
  background-color: #fff;
}

サイドバー背景には、個人的にお気に入りのキレイな画像を使用しました。
せっかくなので、重ねた要素は透過して背景画像を生かしたいと思います。

開発環境

Ruby 2.6.5
Rails 6.0.3.4
MySQL
Visual Studio Code
(GoogleChrome)

検証

まず背景の透過といえば…opacityプロパティが挙げられます。

opacity
要素の透明度を指定できます。

.sample {
  /* 透明度50% */
  opacity: 0.5;
}

透明度は0.0~1.0内の小数点で指定します。
(0.5であれば、50％の透過率ということです)

こちらをCSSに反映してみます。

sample.css(抜粋/修正)

.side-bar-upper {
  width: 90%;
  height: 50px;
  margin: 5px auto;
  padding: 5px;
  background-color: #fff;
  opacity: 0.5;
}

要素の透過が出来ました…が
sampleの文字も薄い…一緒に透過されているのが分かります。

opacityプロパティはその子孫要素にも透明度が適用される点に注意が必要です…！

〜文字はそのまま、背景のみ透過したい！！〜

そんな時は…rgba()を使用します！

rgba
CSS3で追加された、RGBAカラーモデルでカラーと透明度を指定出来る値です。

.sample{
 color: rgba(0, 0, 0, 0.5);
}

ここで注意が必要なのが、rgbaそのものはプロパティではなく、あくまで値ということです。
background-colorやbox-shadowなどのカラー指定の出来るプロパティに、値として使用ができます。
そのため、カラーはカラーコードではなく、10進数で指定する必要があります。
各値は、**Red, Green, Blue(ここまでがカラー値), alpha(透明度)**の順で指定します。
今回使用している#ffffffは、10進数ですと255, 255, 255になります。

それでは、こちらをCSSに反映してみます。

sample.css(抜粋/修正2)

.side-bar-upper {
  width: 90%;
  height: 50px;
  margin: 5px auto;
  padding: 5px;
  background-color: rgba(255, 255, 255, 0.5);
}

文字はそのままで、無事に背景の透過が出来ました！

終わりに

背景色透過のプロパティはアプリ制作で多用すると思い、今回記事にまとめてみました。

初学者で拙い記事ですが、少しでもお役に立てると嬉しく思います。
最後まで読んでいただき、誠にありがとうございました。

参考記事

要素の透明度の指定（opacity）
カラーの透明度の値（rgba, transparent）
【CSS3リファレンス】opacity
【CSS3リファレンス】rgba()
カラーコードの一覧表(色を調べる/色を作る)