簡単な CSS の書き方を見つけたので、未来の自分のために備忘録としてまとめ。
タイトル通り、ページの背景画像として透過した画像を設定する方法です。
今までは、<body> 要素に background-image プロパティで画像を設定した後、縦横が画面いっぱいの <div> 要素を作成し、それの背景色に半透明で白色もしくは黒色を指定するという方法を使っていました。
この方法でも問題はないのですが、もっと簡単な書き方をしたかったので調べたところ、下記の記事がとても役に立ちました！
Background-image(背景画像)を透過させるCSS｜おがわ｜note
https://note.com/jackinriver/n/n4383898ce0c6
早速ですが実装方法はこちら。
body {
background-image: url("[指定したい背景画像]");
background-repeat: no-repeat;
background-size: cover;
background-color:rgba(255,255,255,0.8);
background-blend-mode:lighten;
}
今回は <body> 要素に対して透過した背景画像を指定しました。
なお、画像は繰り返し表示せず、背景サイズに応じて自動でトリミングするようにしています。
上記のサンプルコードでいうと 3～4行目にあたります。
で、ポイントは 5行目の background-color:rgba(255,255,255,0.8); と、6行目の background-blend-mode:lighten; です。
今までずっと background-image と background-color は両立できないというか、画像が優先的に上に重なるように表示されるものだと思い込んでいたのですが、background-blend-mode と一緒に使うといい感じに重なって、背景画像を透過することができるようです！
ちなみに、background-blend-mode とは「背景色と背景画像のブレンド方法を指定する」プロパティとのこと。
値によっては「絵具を混ぜたような結果」とか「スクリーン（光）を重ねたような結果」とか「明るい色はより明るく、暗い色はより暗くなる」…ということができるらしいのですが、正直違いが分からない！
なお、今回使用した background-blend-mode:lighten; は、ざっくりと説明すると「少し明るめにする効果」らしいです。
…かみ砕いて説明してもらったのに、やっぱりしっくりこないというか、いまいち理解できていないです。
使ったことがないプロパティなので、今後使うようになったら理解できるかな？
理解出来たら、また記事にしたいと思います。
とりあえず、「背景画像に透過画像を設定する」という今回の目標は達成できたので良しとします！
以上、CSS でページの背景に透過した画像を指定する方法でした。
ご参考になれば幸いです。
