)ログイン例えば、サイトのヘッダー画像やギャラリー形式のアーカイブページなどでは、画像の上にサイトタイトルや投稿タイトルとなる文字列を重ねて表示するデザインを施す場合、画像とテキストが同化して見難くならないよう、テキストが白文字ならば画像はbrightnessで明るさを落としたり、白文字が映えるような背景カラーのレイヤー要素を画像にオーバーレイさせるなどの工夫をする場合があります。今回のケースでは、テキストを色で塗りつぶすのではなく、CSSのみで色を重ね合わせた画像の上に表示されているテキスト(文字列)の形状部分だけ色を切り抜いたようなデザインでテキストを表示する方法をいくつか試してみました。細かい想定としては、WordPressのテーマオプションとしてサイトのキーカラーを決め、指定したヘッダー画像や個々のアイキャッチ画像にキーカラーを合成させ、その上に表示するタイトルなどのテキスト部分のシェイプだけキーカラーを透過して画像が透けて見えるような感じです。このため、画像ごとに見やすくなるように個別に微調整をしてCSSを組まなければいけないような手法はNGで、どんな画像でも前面の文字列が見えるような汎用的な手法を考えてみます。今回チェックした2パターンの結果はこちら。4アイテムありますが、左側はCSSのブレンドモードを利用した場合、右側は画像をテキストの形状に切り出した場合の表示例で、1行目と2行目で画像を変えてチェックしています。併用まず思い浮かぶのは、CSSのブレンドモードのためのプロパティを利用すると簡単に表現できそうです。背景(background)のブレンドモードを指定するbackground-blend-modeと、2つの要素が重なり合ったときの見え方(合成の仕方)を指定するmix-blend-modeがあり、この2つのプロパティの組み合わせを調整してみます。background-imageで画像を指定し、background-colorで同じ要素に背景カラーも指定しておき、background-blend-modeプロパティで画像と背景カラーを合成します。mix-blend-mode:overlay;}background-blend-modeのそれぞれの値の比較は以下をご覧ください。CodePen.これらのうち、hue、saturation、color、luminosityについてはSafari、iOS版SafariとChromeにて利用できません。最新のブラウザ対応状況はこちら。組み合わせは、同じ設定でも画像内の色の変化や明暗の差が多い画像では、前面のテキストが見えにくくなってしまいます。いうわけで、MS系のブラウザが全滅な上に汎用的にはとても利用できないため、background-blend-modeとmix-blend-modeの組み合わせは却下。組み合わせは画像によってテキストの視認性が左右されるため、仕方なく背景画像には::before疑似セレクタを利用して透過度を持たせたカラーレイヤーを重ねてみます。その上に表示されるテキストの要素(figcaption)は、直前にある背景要素のサイズと大きさを同じにして、さらに同じ背景画像(background-image)を指定します。キーワードを指定します。これにより、背景画像のテキスト部分のみが切り出された状態になります。ちなみに、このプロパティはFireFoxであっても、-moz-background-clipではなく、webkitのベンダープリフィクスを付けないと反映されません。これら、背景要素、背景カラーレイヤー、テキストの重なり(位置関係)をわかりやすく3次元で可視化してみると、このような状態です。CodePen.表示結果この方法であれば、どのような画像でも前面のテキストの視認性は保てそうです。それぞれの要素のCSSは以下の構成となります。毎度のことながら、、IEとEdgeはやはりbackground-clip:textなど解釈してくれないため、画像(background-image)だけが表示されてしまい、テキストが見えません。11そしてEdgeについてはCSSハックを利用して、画像とカラーレイヤーを重ねた上に不透明度を指定したテキストを表示するようにします。11そしてEdgeのみにCSSを適用するには、以下のCSSハックの書式で記述します。組み合わせではなく、少々強引なやり方で-webkit-background-clip:textを利用したパターンなのでスマートではないかもしれませんが、視認性を考えるとこの方法が汎用的に利用できそうです。ショートコード応用カスタマイズAMPモードについてアップデート。