マーケティングトレースを行った次の日は、CSSの初歩的でもないお話です。

CSSのBackground-imageを透過させたい、というのは、Webページ作ってりゃ誰しも思うことです。

img要素やdiv要素であればopacityを設計すればおわりです。

しかしこれがbackground-imageを使うときは、若干話が変わってきます。

というのも、background-imageにはOpacityが適用されません。

まあ、当然と言えば当然です。background-imageは要素じゃないもん。

透過したいからと言って「opacity」でググっても、img要素やdiv要素を投下させる方法ばっか。そりゃそうですよ。background-imageにはopacityが効かないのですから。

サルワカくんもdivとimgのopacityしか説明してくれません。

解決方法があるにはあるのですが、透過用のdiv要素を作って20行もCSSを書かせたあげく「簡単ですね♪」などと言う輩とか、

background-colorの透過にのみ言及している人など、「background-imageを透過させる」ことに言及している人はなかなかいません。

いるっちゃあいますが、難しい手法を使ってます。解説を読んでもまるでわからないもん。

と、いうことで、３行で終わらせます。

ほんとにやってみれば簡単です。

と、いうことでこのコードを使います。

background-image:("貴様の画像.jpg");
background-color:rgba(255,255,255,0.8);
background-blend-mode:lighten;

透過度0.8の白でやや背景を明るくします。そんだけです。

background-blend-mode:lightenは簡単に言うと「少し明るめに」です。

特に難しい解説はしないので、とりあえずAtomを起動してやってみましょう。

解説を読みたい方はこちらをお勧めします。

現場からは以上です。

ただし、IEとEdgeには未対応なので注意してください。やっぱりEdgeはクソ…おっと、誰か来たようだ。