CSS 合成と混合
CSS 合成と混合 (compositing and blending) モジュールは、要素の背景レイヤーをどのように互いに合成するか、どのように要素をコンテナーと合成するか、要素が新しい重ね合わせコンテキストを生成する必要があるかどうかを定義します。
この CSS モジュールのプロパティを使用して、要素の背景画像と色を単一の背景画像に合成するために使用するブレンドモードを定義することができます。モジュールが提供するブレンドモードは 16 種類あります。また、要素の境界線、背景、およびテキスト、絵文字、画像を含むコンテンツを、コンテナーの背景とどのように合成するかを定義することもできます。
合成と混合の実際
この例では、それぞれのボックスには境界線と 2 つの縞模様の背景画像、そして単色の背景があります。すべてのボックスに共通する背景には、円のパターンが含まれています。 2 つ目の行にある 3 つのボックスは、コンテナーの背景と合成するように設定されています。
ブレンドの結果、背景、境界線、コンテンツがすべて影響を受けることに注目してください。このサンプルのコードを確認するには、GitHub 上のソースをご覧ください。
リファレンス
プロパティ
関連する概念
<blend-mode>
データ型backdrop-filter
プロパティfilter
プロパティmask-composite
プロパティbackground-color
プロパティbackground-image
プロパティ- 重ね合わせコンテキスト用語
<feBlend>
SVG フィルタープリミティブ<feComposite>
SVG フィルタープリミティブ
仕様書
Specification |
---|
Compositing and Blending Level 2 |
Compositing and Blending Level 1 |
関連情報
- CSS フィルター効果モジュールのプロパティでは、画像、背景、境界線に対してぼかしや色の強弱の変更などのフィルター効果を適用することができます。
- Compositing And Blending In CSS (2015)
- Editing Images in CSS: Blend Modes (2022)
- web.dev: blend modes (2021)