まずは下記のコードと表示結果を見てください。

See the Pen 20200823b by AkiraSatou (@SatoWeb) on CodePen.light

親要素（ <div id=”parent”>~</div> ）にbackgroundで背景を指定し、子要素（ <div id=”child”>~</div> ）に文字を表示しています。

ところが、背景と文字色が同じ色（#12223c）のため、文字が見えません。
※本当に文字があるかどうか疑わしいと思われる方は、コードの文字色を#fff等に変更してみてください。

これを、背景のみ透過して文字が見えるようにしたいのですが、プロパティを“opacity”に指定してしまうと、親要素に指定した背景とともに文字も透過されてしまいます。

背景のみの透過の指定方法

背景のみ透過したい場合の指定方法は、下記ような形で解決できます。

See the Pen 20200823a by AkiraSatou (@SatoWeb) on CodePen.light

ポイントは、背景を指定した親要素にrgba形式で背景色（background-color）を指定し、background-blend-modeの値を任意のものに指定してください。

背景と文字を重ねて表示するデザインを制作する際、フォトショップやイラストレーターなどであらかじめ透過処理をしなくても、cssでなんとかなります。

だからといって、cssだけでなんとでもなるというわけでは決してありませんので、そのところはご理解ください。
フォトショップやイラストレーターが扱えることに越したことはありません。

SATOWEBではホームページの新規制作、リニューアル、業務委託等、受付中です。
お問い合わせはこちらから受け付けていますので、お気軽にご相談ください。