よく見るデザインですが、cssのみで背景を透過させてその上にあるテキストは透過させない、cssです。
要素にopacityを当ててあげれば、透過は可能ですが、当てた要素全てが透過してしまいます。
ではなく、上のテキストは透過させずに背景のboxだけ透過させたい!みたいな事はよくありますね。
要は、↓これを
↓こうではなく(全体が少し透過してしまっている。)
↓こうしたいんですね。(コーディング代行するぜぃ!?の背景のGreen部分だけ透過させる)
では、どの様にしたら良いでしょうか。
background-colorをrgbaで指定するだけ
はい。以上です。
非常に簡単ですね。
例えば、白い背景を透過させたい場合、
この様な指定になります。
追従するheader naviなんかに良く使用されています。
全てカンマ区切りで、rgbのコードの後に透過率を指定します。
上記の場合、rgba(255,255,255,0.8) なので、真っ白の80%表示(20%透過)となります。
以上、良いコーディングライフを!