CSSで背景色(background-color)だけ透明にしたい！文字や画像は透過させない方法

2021/12/13

CSS

background

背景画像の前面にテキストを置くと、色の組み合わせによって読みにくくなってしまう場合があります。

そんな時は、下図のようにテキストに背景色を設けることで可読性を損なわずに済みます。

しかし、今度は背景画像が見えにくくなってしまいました。

背景画像を見せつつ、前面のテキストを読みやすくするには、背景色を透明（半透明）にすることで解決します。

今回は、CSSで背景色（background-color）を透明にする方法を解説します。

１．背景色を透明にする時の問題

要素を透明にするCSSプロパティと言えば「opacity」が有名ですよね。

早速opacityを使って、上図のテキスト部分の背景色を透明にしてみましょう。

まずHTMLは以下の通りです。

<div class="background">
  <div class="box">
    <span>TEST</span>
  </div>
</div>

</div>

背景色が適用されているのはdiv.boxです。

これに下記のCSSのようにopacityを追加します。

.background {
  width: 500px;
  height: 500px;
  position: relative;
  background: url(../img/01.jpg) no-repeat;
  background-size: cover;
  background-position: center;
}

.box {
  width: 300px;
  height: 300px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  background-color: #ff69d4;
  opacity: 0.5;
}

.box span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  font-weight: bold;
  font-size: 100px;
}

.background {

width: 500px;

height: 500px;

position: relative;

background: url(../img/01.jpg) no-repeat;

background-size: cover;

background-position: center;

}

.box {

width: 300px;

height: 300px;

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%,-50%);

background-color: #ff69d4;

opacity: 0.5;

}

.box span {

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%,-50%);

font-weight: bold;

font-size: 100px;

}

opacityの値は、不透明度を小数で記載します。

上記（18行目）の0.5は、不透明度が50%と言う意味です。

結果は以下の通りです。

透明化に成功しました。

しかし、よく見るとテキストも透けてしまっているのがわかると思います。

このようにopacityで背景色を透明化しようとすると、その要素に含まれるテキストや画像、入れ子の要素にまで反映されてしまいます。

では、背景色のみ透明化させるにはどうしたら良いのでしょうか？

２．背景色のみ透明にするには？

背景色のみ透明化する場合はopacityは使用せず、代わりにbackground-colorの値を調整します。

２－１．background-color: transparentで背景色のみ透明にする

background-colorの値としてtransparentを指定すると、背景色を透明に出来ます。

.box {
  width: 300px;
  height: 300px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  background-color: transparent;
}

.box {

width: 300px;

height: 300px;

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%,-50%);

background-color: transparent;

}

結果は以下の通りです。

transparentを指定すると、このように背景色が完全に見えなくなってしまいます。

とは言え、上図のようなケースではbackground-colorを指定しない場合と見た目に変化がないため意味がありません。

２－２．background-color: rgba()で背景色のみ半透明にする

では、完全な透明ではなく半透明にするにはどうしたら良いのでしょうか。

背景色を半透明にする場合には、background-colorに色を指定する値としてカラーコードではなくrgba()関数を入力します。

.box {
  width: 300px;
  height: 300px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  background-color: rgba(255,105,212,0.5);
}