cssでbackgroundだけ透過させてテキストとかは、透過なしにしたい時はRGBaを使うと簡単

cssで透過というと、Opacityですよね

ただ、Opacityだと、その要素全てが透過になってしまいます。

今回、背景を透明にして、テキスト文字列は透過したくない

ということをやりたいので、その場合は、RGBa を使います。

文字とかも全部を透過したい時は、その要素にOpacity

opacity: 0.5;

みたいに使います。

0から１で指定します。

RGBaの使い方

background-color: rgba(0,0,0,0);

みたいに使います。これだと完全に透明です。

最後のパラメータに1を設定すると

background-color: rgba(0,0,0,1);

これで不透明。デフォルトです

前の３つの０は、色です。RGBなので、0-255、または、0%-100%と設定

赤い半透明にしたい場合は、

background-color: rgba(255,0,0,0.5);

です。