【CSS】背景色だけ透過させる方法中に表示する画像やテキストはそのまま表示させたい

画像やテキストなどは通常表示で背景色だけを透過させる方法を紹介します。

原因

背景を透過させようとしたら画像やテキストなども全て透過されてしまいました。一体何が原因なのでしょうか。

結論から言うとopacityを使用していたのが原因でした。

背景だけを透過したい場合は背景色自体をrgbaで指定して透過させます。

.background {
  background-color: rgba(0, 0, 0, 0.9);
}

上記の例だと一番後ろの0.9となっている箇所が透明度の指定となります。ここの数値が小さいほど背景が透明に近くなります。

色をrgbaで指定する場合は変換ツールを使用すると便利です。