このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docsコミュニティーについてもっと知り、仲間になるにはこちらから。
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> <div> <div></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;}様々な混合モードを試してみる
<div></div><select> <option>normal</option> <option>multiply</option> <option selected>screen</option> <option>overlay</option> <option>darken</option> <option>lighten</option> <option>color-dodge</option> <option>color-burn</option> <option>hard-light</option> <option>soft-light</option> <option>difference</option> <option>exclusion</option> <option>hue</option> <option>saturation</option> <option>color</option> <option>luminosity</option></select>#div { width: 300px; height: 300px; background: url("br.png"), url("tr.png"); background-blend-mode: screen;}document.getElementById("select").onchange = (event) => { document.getElementById("div").style.backgroundBlendMode = document.getElementById("select").selectedOptions[0].innerHTML;};console.log(document.getElementById("div"));仕様書
| Specification |
|---|
| Compositing and Blending Level 2 # background-blend-mode |