css 背景のみ透過 テキストは透過させない

よく見るデザインですが、cssのみで背景を透過させてその上にあるテキストは透過させない、cssです。

要素にopacityを当ててあげれば、透過は可能ですが、当てた要素全てが透過してしまいます。

 

ではなく、上のテキストは透過させずに背景のboxだけ透過させたい!みたいな事はよくありますね。

 

要は、↓これを

 

↓こうではなく(全体が少し透過してしまっている。)

 

 

↓こうしたいんですね。(コーディング代行するぜぃ!?の背景のGreen部分だけ透過させる)

 

 

では、どの様にしたら良いでしょうか。

background-colorをrgbaで指定するだけ

 

はい。以上です。

 

非常に簡単ですね。

例えば、白い背景を透過させたい場合、

 

この様な指定になります。

追従するheader naviなんかに良く使用されています。

全てカンマ区切りで、rgbのコードの後に透過率を指定します。

上記の場合、rgba(255,255,255,0.8) なので、真っ白の80%表示(20%透過)となります。

 

以上、良いコーディングライフを!