このページはコミュニティーの尽力で英語から翻訳されました。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-image プロパティと同じ順番で定義してください。混合モードのリストと背景画像のリストの長さが異なる場合は、長さが合うまで繰り返しや切り落としが行われます。
試してみましょう
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;
}
構文
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'>#
<mix-blend-mode> =
<blend-mode> |
plus-lighter
<blend-mode> =
normal |
darken |
multiply |
color-burn |
lighten |
screen |
color-dodge |
overlay |
soft-light |
hard-light |
difference |
exclusion |
hue |
saturation |
color |
luminosity
例
基本的な例
css
.item {
width: 300px;
height: 300px;
background: url("image1.png"), url("image2.png");
background-blend-mode: screen;
}
様々な混合モードを試してみよう
<div id="div"></div>
<select id="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 Module Level 2 # background-blend-mode |