Background-image(背景画像)を透過させるCSS
マーケティングトレースを行った次の日は、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はクソ…おっと、誰か来たようだ。