background-blend-mode
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2020年1月.
background-blend-mode は CSS のプロパティで、要素の背景画像が相互にどのように混合されるか、また要素の背景色とどのように混合されるかを設定します。
試してみましょう
background-blend-mode: normal; background-blend-mode: multiply; background-blend-mode: hard-light; background-blend-mode: difference; <section class="default-example" id="default-example"> <div class="example-container"> <div class="transition-all" id="example-element"></div> </div> </section> #example-element { background-color: green; background-image: url("/shared-assets/images/examples/balloon.jpg"); width: 250px; height: 305px; } 混合モードは background-image プロパティと同じ順番で定義してください。混合モードのリストと背景画像のリストの長さが異なる場合は、長さが合うまで繰り返しや切り落としが行われます。
構文
css
/* 1 値 */ background-blend-mode: normal; /* 2 値、背景ごとにひとつずつ */ background-blend-mode: darken, luminosity; /* グローバル値 */ background-blend-mode: inherit; background-blend-mode: initial; background-blend-mode: revert; background-blend-mode: revert-layer; background-blend-mode: unset; 値
<blend-mode>-
適用する混合モードです。複数の値をカンマ区切りで置くことができます。
公式定義
| 初期値 | normal |
|---|---|
| 適用対象 | すべての要素。 SVG では、コンテナー要素、グラフィック要素、グラフィック参照要素に適用されます。。 ::first-letterおよび::first-line にも適用されます。 |
| 継承 | なし |
| 計算値 | 指定通り |
| アニメーションの種類 | アニメーション不可 |
形式文法
background-blend-mode =
<mix-blend-mode>#
例
基本的な例
css
.item { width: 300px; height: 300px; background: url("image1.png"), url("image2.png"); background-blend-mode: screen; } 様々な混合モードを試してみる
仕様書
| Specification |
|---|
| Compositing and Blending Level 2 # background-blend-mode |
ブラウザーの互換性
Loading…