geta1972TweetPocketCheckこんにちわ。Sheet)の略ですが、何故htmlタグで記述するときに、<style>と書かなければいけないのか、考えれば考えるほど不思議に感じてしまう、下駄です。href=”***”>というのも、なかなか初心者にはハードルが高いこともよく分かる。javascriptは、<scripte>だけなのに・・・CSSの背景画像は半透明にできないのか?そんなCSSで、とあるエレメントで背景画像と同時に文字をのっけて表示する場合に、背景画像によって、文字と色がかぶってしまうため、背景画像を半透明にしたいと思ったんですが、background-imageを半透明にする機能はcssには無いようです。今後の言語アップデートによって機能化されるかもしれませんが、プログラミング作業はそこまで待ってはくれません。納品しなければいけない為に、早急に対応しなければいけません。裏技で半透明にする方法がありました。}12345img.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以外のブラウザを使うことを条件にするサービスであれば、何の問題もないでしょう。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。