∞開発ブログ~コアでニッチなIT技術や、自作のプログラム、日々の生活にほんの少しでも力になるための記事を記載していくブログになります。関連記事はじめに以前サイトを作成している際、いただいたサイトデザイン画像が「画像を境に文字の色を変える」という使用になっていました。́Д`)」なんて内心思ってました。その後参考として送っていただいたサイトを確認するとなんとマジでCSSで実現出来ていることを確認。_)mで、悔しいのでそのサイトを研究。今回ブログにまとめてみることにしました。サンプルソース今回CodePenを使用してみることにしました。CodePen.dark解説ざっとポイントをまとめてみます。・全体を囲むdev”message-block”に背景画像を設定する。position:relativeにする・表示する本文を記述するためのdivを2つ作成する。heightを同値にする・画像内に表示する側”message-white”のdiv要素のwidth・heightを、div内に収まるように設定する(calc値が便利)そして、overflow:hiddenを使用する(とっても重要)・画像内に表示する側”message-white”のdiv>span要素を、z-index:1にして表に出すwidthとheightを、div要素のwidth・heightと同値にするcolorを画像に表示する文字色(white)に設定する表示する文言を2つ作成するというのが盲点でした!両方ともにposition:absolute、topとleftを同値にしてしまえば、たしかにピッタリ重なりますね。画像内に表示する側”message-white”では何をしているかというと、まず直下のdiv要素では、画像にピッタリ収まるように、widthとheightを設定します。これにはcalcを使うと便利です。親要素のdivのwidthから、div”message-white”のleft値を引くと、必要なwidthが出てきます。どっちかが%指定でも大丈夫。heightも同じことやってください。widthとheightを記入することで、↓の画像の黄色背景部分が”message-white”に該当します。ここからが重要なのですが、div”message-white”に”overflow:hidden”を設定しています。これを入れると、このdivの子要素がはみ出ていた場合、はみ出ていた部分は画面から非表示になります。これがこの後効いてきますね。その後、div”message-white”の直下のspanに、cssを付与していきます。widthとheightは、もう片方のdiv”message-black”のwidth,heightと同値にします。”position:absolute”も付与します。することで、文字数が長くなったとしても、全く同じように改行など行われるわけですね。本来(“overflow:hidden”がなかった場合)、span要素は↓の赤背景部分に適用されています。実際には画像からはみ出た赤背景部分は、画面から非表示になります。そのため実際には、要素”message-white”で表示されている範囲はこうなります。さっきの黄色背景と同じ範囲ですね。ここまで解説した”message-white”と、文字色黒の”message-black”を組み合わせます。赤背景が”message-white”要素、緑背景が”message-black”要素に該当します。このCSSを適用することによって、画像を境に文字色を変えることが出来るわけですね。LPやスタイリッシュなシングルページを作る際には、こんなデザインを作ることがあるかもしれないですね。理屈が分かった時は本気で感心しました。これ考えついた人と友達になりたい。コメントをキャンセルメールアドレスが公開されることはありません。©hirossyi.。