CSS Academy · レッスン

レイヤー合成のためのmix-blend-mode

Q: 「レイヤー合成のためのmix-blend-mode」で何を学びますか？

CSSでPhotoshop風のブレンドモードを使い、要素の色を背後のコンテンツと合成します。 ブラウザで直接実行するハンズオンコードでCSS Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

CSSでPhotoshop風のブレンドモードを使い、要素の色を背後のコンテンツと合成します。

レッスン 3/413 ステップ

「レイヤー合成のためのmix-blend-mode」はCoddyKit上の無料CSS Academyレッスンです。これはレッスン3/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはCSS Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 CSS Academyコースには全4レッスンが含まれています。

mix-blend-modeとは

mix-blend-modeは、要素のピクセルを背後にある要素のピクセルとどのように合成するかを制御します。Photoshopのレイヤーブレンドモードに似ています。背景を含む要素全体に影響します。

normal（デフォルト）

normalはデフォルトで、ブレンドを行いません。上の要素がその下にあるものを覆います。

multiply

multiplyはピクセル値を乗算して暗くします。白は透明になり、黒は黒のままです。色付きの背景に暗い色調の画像を重ねる場合に適しています。

<div class="blend-wrapper">
  <div class="texture"></div>
</div>

screen

screenはmultiplyの逆で、明るくします。黒は透明になり、白は白のままです。光の効果や発光に適しています。

<div class="blend-wrapper">
  <div class="glow"></div>
</div>

overlay

overlayはmultiplyとscreenを組み合わせます。暗い領域は暗くなり、明るい領域は明るくなります。中間調を保ちながらコントラストを高めます。

<div class="blend-wrapper">
  <div class="texture"></div>
</div>

difference

differenceは色を減算します。同じ色は黒になり、反対の色は白になります。サイケデリックでコントラストの高い効果を作成できます。

<div class="blend-wrapper"><span class="inverted-text">Invert Me</span></div>

Hard LightとSoft Light

hard-lightは、元の色に応じてmultiplyまたはscreenを適用します。soft-lightは、コントラストの増加がより小さい、柔らかなバージョンです。

色関連のブレンドモード

これらのモードは、特定の色の特性だけをブレンドします。

hue — 色相は上の要素から、彩度と明度は下の要素から取得します
saturation — 彩度を上の要素から取得します
color — 色相と彩度は上の要素から、明度は下の要素から取得します
luminosity — 明度を上の要素から取得します

デュオトーン用のColorモード

色付きの要素にmix-blend-mode: colorを設定して重ねると、デュオトーン画像を作成できます。

<div class="duotone"></div>

反転テキスト効果

どのような背景でも反転して表示されるテキストです。

<div class="blend-wrapper"><span class="inverted-label">Adaptive Label</span></div>

スタッキングコンテキストとblend mode

mix-blend-modeは同じスタッキングコンテキスト内の要素とブレンドします。親要素にisolation: isolateプロパティを設定すると、新しいスタッキングコンテキストが作成され、分離されたグループの外側にブレンドモードが影響するのを防げます。

確認問題

要素の白い部分を透明にし、色の付いた部分や暗い部分を残す、透明な紙のようなブレンドモードはどれですか。

対話的なレッスンで答える

まとめ

mix-blend-modeは要素のピクセルを背後のコンテンツとブレンドします。主なモードは、multiply（暗くする、白は透明）、screen（明るくする、黒は透明）、overlay（コントラストを高める）、difference（減算）、color（画像の色を変更）です。ブレンドの範囲を親要素内に限定するには、親にisolation: isolateを使用します。

無料で開始

AI チューターと学ぶ CSS — 無料

ブラウザでリアルコードを書いて実行し、24/7 の AI チューターから瞬時にサポートを受け、ウェブまたはアプリで続きから学習できます。

コース: 40
レッスン: 159

無料で学習を始めるコース全体を表示

よくある質問

「レイヤー合成のためのmix-blend-mode」レッスンは無料ですか？

はい。「レイヤー合成のためのmix-blend-mode」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、CSS Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 CSS Academyコースには全4レッスンが含まれています。

「レイヤー合成のためのmix-blend-mode」で何を学びますか？

CSSでPhotoshop風のブレンドモードを使い、要素の色を背後のコンテンツと合成します。ブラウザで直接実行するハンズオンコードでCSS Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

CSS Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのCSS Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン3/4です。

「レイヤー合成のためのmix-blend-mode」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このCSS Academyレッスンでコードを書いて実行できますか？

はい。すべてのCSS Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

filter：blur、brightness、contrast、grayscale
すりガラス効果のためのbackdrop-filter
レイヤー合成のためのmix-blend-mode
isolationプロパティ

← CSS Academyに戻る