[css] 背景画像を半透明にする裏技

cssは「カスケーディング・スタイル・シート」(Cascade Style Sheet)の略ですが、何故htmlタグで記述するときに、<style>と書かなければいけないのか、考えれば考えるほど不思議に感じてしまう、下駄です。 ちなみに、外部ファイルを読み込む時は、<link rel="stylesheet" href="***">というのも、なかなか初心者にはハードルが高いこともよく分かる。 javascriptは、<scripte>だけなのに・・・

CSSの背景画像は半透明にできないのか？

そんなCSSで、とあるエレメントで背景画像と同時に文字をのっけて表示する場合に、背景画像によって、文字と色がかぶってしまうため、背景画像を半透明にしたいと思ったんですが、background-imageを半透明にする機能はcssには無いようです。 ※2020年1月現在 背景画像と文字が被ってしまった状態 今後の言語アップデートによって機能化されるかもしれませんが、プログラミング作業はそこまで待ってはくれません。 すぐに納品しなければいけない為に、早急に対応しなければいけません。 でもご安心ください。 裏技で半透明にする方法がありました。

背景画像を半透明にする方法と概念

img.bg-and-txt{ background-image:url(...); background-color:rgba(255,255,255,0.5); background-blend-mode:color; } 背景50%の半透明 サクッとできましたね。ハトサブレよりもサクサクです。 種明かしは簡単で、背景色をセットして（background-color）、ブレンドモード（background-blend-mode:color;）というあまり使わない命令を付けるだけです。 ブレンドモードは、他にも色々なモードがありますが、使い方のイメージは、Photoshopのレイヤー機能で別のレイヤーと被せてブレンドする時の機能に似ています。 ただしこの時は、背景色に対してブレンドするという事で、その背景色の半透明具合で、ブレンド度合いを調整するという具合です。 背景色が"0.5"の時は、50%半透明、背景色が"1.0"の時は、100%半透明（真っ白になります）、opacityと同じ感じと考えればいいでしょう。 ちなみに、背景色を"rgba(255,0,0,0.5)"とすると、赤色の半透明になるし、グラデーションをつければその色に対しての半透明になるはずですが、グラデでの検証が面倒くさいので、やりたい人はセットしてみてください。

問題点を理解しておこう

この裏技は、IEとEDGEでは、全く機能しません。 https://caniuse.com/#search=background-blend-mode よくあるMS系の仲間はずれですが、他のブラウザと別行動している困ったちゃんのIEは仕方ないでしょうね。 小学校の時に、クラスで一人騒いでいた、友達のことを思い出しましたwww スマホサービスの場合であれば全く問題ないし、IEとEDGE以外のブラウザを使うことを条件にするサービスであれば、何の問題もないでしょう。 ※B2Bでは使えないかもですね・・・ 今回半分諦めていた背景画像の半透明、無事に解決して良かった！やればできる！！