CSS3

：

プロパティ

：

mix-blend-mode

　 編集：2022.07.14 by T.A.

→●、mdn

混色モード。

吊前 mix-blend-mode
値 <blend-mode>
初期値 normal
適用対象 すべての要素。SVG においては、コンテナ要素、グラフィックス要素、グラフィックスを参照する要素。[SVG11]
継承 されない
百分率 受容しない
算出値 指定値
正準的順序 文法に従う
アニメーション型 上可

混色モードは、色を後景に混合する際に利用されるものとする公式を定義する。このふるまいは、§ 混色法にて詳細に述べる。

以下のCSSが組み込んであります：

<blend-mode>
＝normal
| multiply
| screen
| overlay
| darken
| lighten
| color-dodge
| color-burn
| hard-light
| soft-light
| difference
| exclusion
| hue
| saturation
| color
| luminosity

注記： normal 以外の混色モードを要素に適用するときは、新たな積層文脈を確立するものとする。このグループは、その要素を包含する積層文脈と伴に混色して、組成するものとする。

→●
normal ●
混色しないことを指定する、既定の値である。混色公式は、単純に source 色を選択する。

<SPAN style="display:inline-table;

 background:linear-gradient(to right,#0f0, #fff);">

 <IMG src="Com/Touka.gif" style="width:100px; height:100px;">

</SPAN>→

<SPAN style="display:inline-table;

 background:linear-gradient(to right,#0f0, #fff);

 display:inline-table">

 <IMG src="Com/Touka.gif" style="width:100px; height:100px;

  mix-blend-mode:normal; border:1px solid red;

 ">

</SPAN>
multiply ● 

<SPAN style="display:inline-table;

 background:linear-gradient(to right,#0f0, #fff);">

 <IMG src="Com/Touka.gif" style="width:100px; height:100px;">

</SPAN>→

<SPAN style="display:inline-table;

 background:linear-gradient(to right,#0f0, #fff);

 display:inline-table">

 <IMG src="Com/Touka.gif" style="width:100px; height:100px;

  mix-blend-mode:multiply; border:1px solid red;

 ">

</SPAN>
screen ● 

<SPAN style="display:inline-table;

 background:linear-gradient(to right,#0f0, #fff);">

 <IMG src="Com/Touka.gif" style="width:100px; height:100px;">

</SPAN>→

<SPAN style="display:inline-table;

 background:linear-gradient(to right,#0f0, #fff);

 display:inline-table">

 <IMG src="Com/Touka.gif" style="width:100px; height:100px;

  mix-blend-mode:screen; border:1px solid red;

 ">

</SPAN>
overlay ● 

<SPAN style="display:inline-table;

 background:linear-gradient(to right,#0f0, #fff);">

 <IMG src="Com/Touka.gif" style="width:100px; height:100px;">

</SPAN>→

<SPAN style="display:inline-table;

 background:linear-gradient(to right,#0f0, #fff);

 display:inline-table">

 <IMG src="Com/Touka.gif" style="width:100px; height:100px;

  mix-blend-mode:overlay; border:1px solid red;

 ">

</SPAN>
darken ● 

<SPAN style="display:inline-table;

 background:linear-gradient(to right,#0f0, #fff);">

 <IMG src="Com/Touka.gif" style="width:100px; height:100px;">

</SPAN>→

<SPAN style="display:inline-table;

 background:linear-gradient(to right,#0f0, #fff);

 display:inline-table">

 <IMG src="Com/Touka.gif" style="width:100px; height:100px;

  mix-blend-mode:darken; border:1px solid red;

 ">

</SPAN>
lighten ● 

<SPAN style="display:inline-table;

 background:linear-gradient(to right,#0f0, #fff);">

 <IMG src="Com/Touka.gif" style="width:100px; height:100px;">

</SPAN>→

<SPAN style="display:inline-table;

 background:linear-gradient(to right,#0f0, #fff);

 display:inline-table">

 <IMG src="Com/Touka.gif" style="width:100px; height:100px;

  mix-blend-mode:lighten; border:1px solid red;

 ">

</SPAN>
color-dodge ● 

<SPAN style="display:inline-table;

 background:linear-gradient(to right,#0f0, #fff);">

 <IMG src="Com/Touka.gif" style="width:100px; height:100px;">

</SPAN>→

<SPAN style="display:inline-table;

 background:linear-gradient(to right,#0f0, #fff);

 display:inline-table">

 <IMG src="Com/Touka.gif" style="width:100px; height:100px;

  mix-blend-mode:color-dodge; border:1px solid red;

 ">

</SPAN>
color-burn ● 

<SPAN style="display:inline-table;

 background:linear-gradient(to right,#0f0, #fff);">

 <IMG src="Com/Touka.gif" style="width:100px; height:100px;">

</SPAN>→

<SPAN style="display:inline-table;

 background:linear-gradient(to right,#0f0, #fff);

 display:inline-table">

 <IMG src="Com/Touka.gif" style="width:100px; height:100px;

  mix-blend-mode:color-burn; border:1px solid red;

 ">

</SPAN>
hard-light ● 

<SPAN style="display:inline-table;

 background:linear-gradient(to right,#0f0, #fff);">

 <IMG src="Com/Touka.gif" style="width:100px; height:100px;">

</SPAN>→

<SPAN style="display:inline-table;

 background:linear-gradient(to right,#0f0, #fff);

 display:inline-table">

 <IMG src="Com/Touka.gif" style="width:100px; height:100px;

  mix-blend-mode:hard-light; border:1px solid red;

 ">

</SPAN>
soft-light ● 

<SPAN style="display:inline-table;

 background:linear-gradient(to right,#0f0, #fff);">

 <IMG src="Com/Touka.gif" style="width:100px; height:100px;">

</SPAN>→

<SPAN style="display:inline-table;

 background:linear-gradient(to right,#0f0, #fff);

 display:inline-table">

 <IMG src="Com/Touka.gif" style="width:100px; height:100px;

  mix-blend-mode:soft-light; border:1px solid red;

 ">

</SPAN>
difference ● 

<SPAN style="display:inline-table;

 background:linear-gradient(to right,#0f0, #fff);">

 <IMG src="Com/Touka.gif" style="width:100px; height:100px;">

</SPAN>→

<SPAN style="display:inline-table;

 background:linear-gradient(to right,#0f0, #fff);

 display:inline-table">

 <IMG src="Com/Touka.gif" style="width:100px; height:100px;

  mix-blend-mode:difference; border:1px solid red;

 ">

</SPAN>
exclusion ● 

<SPAN style="display:inline-table;

 background:linear-gradient(to right,#0f0, #fff);">

 <IMG src="Com/Touka.gif" style="width:100px; height:100px;">

</SPAN>→

<SPAN style="display:inline-table;

 background:linear-gradient(to right,#0f0, #fff);

 display:inline-table">

 <IMG src="Com/Touka.gif" style="width:100px; height:100px;

  mix-blend-mode:exclusion; border:1px solid red;

 ">

</SPAN>
hue ● 

<SPAN style="display:inline-table;

 background:linear-gradient(to right,#0f0, #fff);">

 <IMG src="Com/Touka.gif" style="width:100px; height:100px;">

</SPAN>→

<SPAN style="display:inline-table;

 background:linear-gradient(to right,#0f0, #fff);

 display:inline-table">

 <IMG src="Com/Touka.gif" style="width:100px; height:100px;

  mix-blend-mode:hue; border:1px solid red;

 ">

</SPAN>
saturation ● 

<SPAN style="display:inline-table;

 background:linear-gradient(to right,#0f0, #fff);">

 <IMG src="Com/Touka.gif" style="width:100px; height:100px;">

</SPAN>→

<SPAN style="display:inline-table;

 background:linear-gradient(to right,#0f0, #fff);

 display:inline-table">

 <IMG src="Com/Touka.gif" style="width:100px; height:100px;

  mix-blend-mode:saturation; border:1px solid red;

 ">

</SPAN>
color ● 

<SPAN style="display:inline-table;

 background:linear-gradient(to right,#0f0, #fff);">

 <IMG src="Com/Touka.gif" style="width:100px; height:100px;">

</SPAN>→

<SPAN style="display:inline-table;

 background:linear-gradient(to right,#0f0, #fff);

 display:inline-table">

 <IMG src="Com/Touka.gif" style="width:100px; height:100px;

  mix-blend-mode:color; border:1px solid red;

 ">

</SPAN>
luminosity ● 

<SPAN style="display:inline-table;

 background:linear-gradient(to right,#0f0, #fff);">

 <IMG src="Com/Touka.gif" style="width:100px; height:100px;">

</SPAN>→

<SPAN style="display:inline-table;

 background:linear-gradient(to right,#0f0, #fff);

 display:inline-table">

 <IMG src="Com/Touka.gif" style="width:100px; height:100px;

  mix-blend-mode:luminosity; border:1px solid red;

 ">

</SPAN>
テスト
HTML：

ここに表示
HTML：

ここに表示
スクリプト：


スクリプト：



表示内容：
表示内容：