概要
CSS の background-blend-mode
プロパティは、要素の背景画像を互いに、あるいは要素の背景色とどのようにブレンドするかを示します。
ブレンドモードは background-image
CSS プロパティと同じ順番で定義します。ブレンドモードのリストと背景画像のリストの長さが異なる場合は、長さが合うまで繰り返しおよび短縮されます。
初期値 normal
適用対象 全要素. In SVG, it applies to container elements, graphics elements, and graphics referencing elements.. It also applies to ::first-letter
and ::first-line
. 継承 不可 メディア none 計算値 指定値 アニメーションの可否 不可 正規順序 形式文法で定義される一意のあいまいでない順序
構文
/* 1 値 */
background-blend-mode: normal;
/* 2 値、背景ごとにひとつずつ */
background-blend-mode: darken, luminosity;
/* グローバル値 */
background-blend-mode: initial;
background-blend-mode: inherit;
background-blend-mode: unset;
値
<blend-mode>
適用するブレンドモードを表す <blend-mode>
です。カンマ区切りで複数の値を置くことができます。
<blend-mode> #
例
<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('https://mdn.mozillademos.org/files/8543/br.png'),url('https://mdn.mozillademos.org/files/8545/tr.png');
background-blend-mode: screen;
}
document.getElementById("select").onchange = function(event) {
document.getElementById("div").style.backgroundBlendMode = document.getElementById("select").selectedOptions[0].innerHTML;
}
console.log(document.getElementById('div'));
仕様
ブラウザ実装状況
機能
Chrome
Firefox (Gecko)
Internet Explorer
Opera
Safari
基本サポート
35
30.0 (30.0)
未サポート
22
7.1
機能
Android
Firefox Mobile (Gecko)
IE Mobile
Opera Mobile
Safari Mobile
基本サポート
未サポート
30.0 (30.0)
未サポート
22
8
関連情報
ドキュメントのタグと貢献者
最終更新者:
yyss ,
2016/06/04 4:35:52