CSS 合成と混合

CSS 合成と混合 (compositing and blending) モジュールは、要素の背景レイヤーをどのように互いに合成するか、どのように要素をコンテナーと合成するか、要素が新しい重ね合わせコンテキストを生成する必要があるかどうかを定義します。

この CSS モジュールのプロパティを使用して、要素の背景画像と色を単一の背景画像に合成するために使用するブレンドモードを定義することができます。モジュールが提供するブレンドモードは 16 種類あります。また、要素の境界線、背景、およびテキスト、絵文字、画像を含むコンテンツを、コンテナーの背景とどのように合成するかを定義することもできます。

合成と混合の実際

この例では、それぞれのボックスには境界線と 2 つの縞模様の背景画像、そして単色の背景があります。すべてのボックスに共通する背景には、円のパターンが含まれています。 2 つ目の行にある 3 つのボックスは、コンテナーの背景と合成するように設定されています。

ブレンドの結果、背景、境界線、コンテンツがすべて影響を受けることに注目してください。このサンプルのコードを確認するには、GitHub 上のソースをご覧ください。

リファレンス

プロパティ

関連する概念

仕様書

Specification
Compositing and Blending Level 2
Compositing and Blending Level 1

関連情報