CSS3 mix-blend-modeで画像にテキストを表示する方法

画像の背景 大きな表示テキストの背後にはよく見えます。しかし、そのCSS実装はそれほど単純ではありません。我々は使用することができます 背景クリップ：テキスト。 プロパティ、しかしそれはまだ十分なブラウザのサポートなしで実験的な機能です.

テキストの背後に画像の背景を表示するCSSの代替方法は、 を使用して ミックスブレンドモード 財産. HTML要素のブレンドモード Internet Explorerなど、いくつかの例外を除いて、最近のすべてのデスクトップおよびモバイルブラウザでかなりサポートされています。.

この記事では、どのようにしてそれを見るつもりです ミックスブレンドモード （特にそのモードのうちの2つ）は機能し、どのようにそれを使用することができますか 画像の背景を含むテキストを表示する 2つのユースケース

1. 背景画像が 見られます 本文を通して
2. 背景画像が 走り回る テキスト

下記のデモのいくつかの例を参照してください（画像はunsplash.comからのものです）。.

の ミックスブレンドモード CSSプロパティは、 コンテンツ そしてその 背景 HTML要素の 色を混ぜ合わせる.

ブレンドモードのリストを見てください。 かける そして 画面 この記事では.

まず、これら2つの特定のブレンドモードがどのように機能するのかを見てみましょう。.

どうやって かける ＆ 画面 ブレンドモード

技術的にはブレンディングモードは 最終カラー値を計算する 要素の色成分とその背景を使う.

の かける ブレンドモード

の中に かける ブレンドモードでは、要素の個々の色とその背景は 掛けた, そして得られた色は最終的な混合バージョンに適用されます.

の かける ブレンドモードは次の式に従って計算されます。

Ｂ（Ｃｂ、Ｃｓ）＝ Ｃｂ×Ｃｓ

ここで、Cb - 背景の色成分Cs - ソース要素の色成分B - ブレンド機能

いつ Cb そして Cs 乗算されると、結果の色はこれら2つの色成分の混合になります。 2色のうち最も濃い色.

テキスト画像の背景を作成するには、次の場合に焦点を当てる必要があります。 Cs （ソース要素の色成分）は 黒か白.

もし Cs です 黒 その値は 0, 出力色も黒になります。 Cb×0 = 0. だから、要素が黒く着色されているとき、それは 背景の色は関係ありません, ブレンド後に見えるのは黒です.

もし Cs です 白 その値は 1, 出力色は何でも Cb というのはCb×1 = Cb. したがって、この場合は背景が直接見えます。 そのまま.

の 画面 ブレンドモード

の 画面 ブレンドモードは、 かける ブレンドモード 反対の結果. だから、 黒い前景 背景を示します そのまま, そして 白の前景は白を示します どんな背景でも.

その公式をすぐに見てみましょう。

Ｂ（Ｃｂ、Ｃｓ）＝ Ｃｂ ＋ Ｃｓ - （Ｃｂ×Ｃｓ）

いつ Cs です 黒 （0）では、背景色はブレンド後に次のように表示されます。

Cb + 0 - （Cb×0）= Cb + 0 - 0 = Cb

いつ Cs です 白 （1）結果はどんな背景でも白になります。

Cb + 1 - （Cb×1）= Cb + 1 - Cb = 1

1.テキストで表示された画像

背景画像を通して表示されるテキストを表示するには、 画面 ブレンドモード と 黒いテキスト そして 白い周囲スペース.

 
 
水
 
 

 .背景幅：600ピクセル;高さ：210ピクセル。背景画像：url（someimage.jpg）;背景サイズ：100％。マージン：自動。テキスト色：黒;背景色：ホワイト。ミックスブレンドモード：スクリーン。幅：100％。身長：100％。フォントサイズ：160pt。フォントの太さ：太字。 text-align：center。行の高さ：210ピクセル。マージン：0。  

現在、テキストは下のようになっています。次のステップでは、背景にカスタムカラーを追加します。.

色を追加する

ご想像のとおり、ブレンドモードを使用しても、テキストを囲む領域には2色の選択肢しかありません。 - 黒が？それでも白が. しかしながら 白で, 色を追加することは可能です オーバーレイを使う, オーバーレイカラーが 使用されている画像とうまく一致.

周囲の領域に色を追加するには、

HTMLへ オーバーレイ用, そしてそれを与える 透明度の高い背景色. また使用する 混合混合モード：乗算 オーバーレイの背景色を変更するのに役立つので、オーバーレイのプロパティ 少し良く混ぜる 画像がテキストの内側に表示される.

 
 
水
 
 
 

 .overlay 背景色：rgba（0,255,255、.1）;ミックスブレンドモード：乗算。幅：100％。身長：100％。位置：絶対トップ：0。  

このテクニックを使うと、テキストの周囲の領域を画像の背景で色付けできます。

このテクニックは、 微妙な透明色. 完全に不透明な色、または画像と一致しない色を使用する場合、テキスト内に表示される画像は使用されている色と非常に目に見える色合いになります。, 不透明色を避ける.

2.画像​​の背景に囲まれたテキスト

画像背景上の通常のテキスト配置でも 同じテクニックが必要, 上記のデモがどのように見えるかの例をお見せしましょう。 効果が逆転する, つまり、テキストの色が白で背景が黒の場合.

 .テキスト色：白;背景色：黒。ミックスブレンドモード：スクリーン。幅：100％。身長：100％。フォントサイズ：160pt。フォントの太さ：太字。 text-align：center。行の高さ：210ピクセル。マージン：0。  

あなたが使用することができます 同じオーバーレイ テキストを白にしたくないのであれば、テキストに色を付けるために.

 .overlay 背景色：rgba（0,255,255、.1）;ミックスブレンドモード：乗算。幅：100％。身長：100％。位置：絶対トップ：0。  

そして以下に、逆の場合がどのように見えるかを見ることができます。

Internet Explorer、または他のブラウザをサポートしていないことに注意してください。 ミックスブレンドモード プロパティ、画像の背景は表示されず、テキストは黒（または白）のままになります.