aboutsummaryrefslogtreecommitdiff
path: root/files/ja/web/css/mix-blend-mode/index.html
diff options
context:
space:
mode:
Diffstat (limited to 'files/ja/web/css/mix-blend-mode/index.html')
-rw-r--r--files/ja/web/css/mix-blend-mode/index.html655
1 files changed, 655 insertions, 0 deletions
diff --git a/files/ja/web/css/mix-blend-mode/index.html b/files/ja/web/css/mix-blend-mode/index.html
new file mode 100644
index 0000000000..260c570359
--- /dev/null
+++ b/files/ja/web/css/mix-blend-mode/index.html
@@ -0,0 +1,655 @@
+---
+title: mix-blend-mode
+slug: Web/CSS/mix-blend-mode
+tags:
+ - CSS
+ - CSS プロパティ
+ - ウェブ
+ - リファレンス
+ - 合成と混合
+translation_of: Web/CSS/mix-blend-mode
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>mix-blend-mode</code></strong> プロパティは、要素の内容物と親要素の内容物や要素の背景をどのように混合するかを設定します。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/mix-blend-mode.html")}}</div>
+
+<p class="hidden">このインタラクティブデモのソースは GitHub のリポジトリに格納されています。インタラクティブデモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送ってください。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush:css">/* キーワード値 */
+mix-blend-mode: normal;
+mix-blend-mode: multiply;
+mix-blend-mode: screen;
+mix-blend-mode: overlay;
+mix-blend-mode: darken;
+mix-blend-mode: lighten;
+mix-blend-mode: color-dodge;
+mix-blend-mode: color-burn;
+mix-blend-mode: hard-light;
+mix-blend-mode: soft-light;
+mix-blend-mode: difference;
+mix-blend-mode: exclusion;
+mix-blend-mode: hue;
+mix-blend-mode: saturation;
+mix-blend-mode: color;
+mix-blend-mode: luminosity;
+
+/* グローバル値 */
+mix-blend-mode: initial;
+mix-blend-mode: inherit;
+mix-blend-mode: unset;
+</pre>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>&lt;blend-mode&gt;</code></dt>
+ <dd>適用する混合モードを表す {{cssxref("&lt;blend-mode&gt;")}} です。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<div class="hidden" id="mix-blend-mode">
+<pre class="brush: html">&lt;div class="grid"&gt;
+ &lt;div class="col"&gt;
+ &lt;div class="note"&gt;Blending in isolation (no blending with the background)&lt;/div&gt;
+ &lt;div class="row isolate"&gt;
+ &lt;div class="cell"&gt; normal
+ &lt;div class="container normal"&gt;
+ &lt;div class="group"&gt;
+ &lt;div class="item firefox"&gt;&lt;/div&gt;
+ &lt;svg viewBox="0 0 150 150"&gt;
+ &lt;defs&gt;
+ &lt;linearGradient id="red"&gt;
+ &lt;stop offset="0" stop-color="hsl(0,100%,50%)" /&gt;
+ &lt;stop offset="100%" stop-color="hsl(0,0%,100%)" /&gt;
+ &lt;/linearGradient&gt;
+ &lt;linearGradient id="green"&gt;
+ &lt;stop offset="0" stop-color="hsl(120,100%,50%)" /&gt;
+ &lt;stop offset="100%" stop-color="hsl(120,0%,100%)" /&gt;
+ &lt;/linearGradient&gt;
+ &lt;linearGradient id="blue"&gt;
+ &lt;stop offset="0" stop-color="hsl(240,100%,50%)" /&gt;
+ &lt;stop offset="100%" stop-color="hsl(240,0%,100%)" /&gt;
+ &lt;/linearGradient&gt;
+ &lt;/defs&gt;
+ &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+ &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+ &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+ &lt;/svg&gt;
+ &lt;/div&gt;
+ &lt;/div&gt;
+ &lt;/div&gt;
+ &lt;div class="cell"&gt; multiply
+ &lt;div class="container multiply"&gt;
+ &lt;div class="group"&gt;
+ &lt;div class="item firefox"&gt;&lt;/div&gt;
+ &lt;svg viewBox="0 0 150 150"&gt;
+ &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+ &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+ &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+ &lt;/svg&gt;
+ &lt;/div&gt;
+ &lt;/div&gt;
+ &lt;/div&gt;
+ &lt;div class="cell"&gt; darken
+ &lt;div class="container darken"&gt;
+ &lt;div class="group"&gt;
+ &lt;div class="item firefox"&gt;&lt;/div&gt;
+ &lt;svg viewBox="0 0 150 150"&gt;
+ &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+ &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+ &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+ &lt;/svg&gt;
+ &lt;/div&gt;
+ &lt;/div&gt;
+ &lt;/div&gt;
+ &lt;div class="cell"&gt; screen
+ &lt;div class="container screen"&gt;
+ &lt;div class="group"&gt;
+ &lt;div class="item firefox"&gt;&lt;/div&gt;
+ &lt;svg viewBox="0 0 150 150"&gt;
+ &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+ &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+ &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+ &lt;/svg&gt;
+ &lt;/div&gt;
+ &lt;/div&gt;
+ &lt;/div&gt;
+ &lt;div class="cell"&gt; lighten
+ &lt;div class="container lighten"&gt;
+ &lt;div class="group"&gt;
+ &lt;div class="item firefox"&gt;&lt;/div&gt;
+ &lt;svg viewBox="0 0 150 150"&gt;
+ &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+ &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+ &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+ &lt;/svg&gt;
+ &lt;/div&gt;
+ &lt;/div&gt;
+ &lt;/div&gt;
+ &lt;div class="cell"&gt; overlay
+ &lt;div class="container overlay"&gt;
+ &lt;div class="group"&gt;
+ &lt;div class="item firefox"&gt;&lt;/div&gt;
+ &lt;svg viewBox="0 0 150 150"&gt;
+ &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+ &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+ &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+ &lt;/svg&gt;
+ &lt;/div&gt;
+ &lt;/div&gt;
+ &lt;/div&gt;
+ &lt;div class="cell"&gt; color-dodge
+ &lt;div class="container color-dodge"&gt;
+ &lt;div class="group"&gt;
+ &lt;div class="item firefox"&gt;&lt;/div&gt;
+ &lt;svg viewBox="0 0 150 150"&gt;
+ &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+ &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+ &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+ &lt;/svg&gt;
+ &lt;/div&gt;
+ &lt;/div&gt;
+ &lt;/div&gt;
+ &lt;div class="cell"&gt; color-burn
+ &lt;div class="container color-burn"&gt;
+ &lt;div class="group"&gt;
+ &lt;div class="item firefox"&gt;&lt;/div&gt;
+ &lt;svg viewBox="0 0 150 150"&gt;
+ &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+ &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+ &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+ &lt;/svg&gt;
+ &lt;/div&gt;
+ &lt;/div&gt;
+ &lt;/div&gt;
+ &lt;div class="cell"&gt; hard-light
+ &lt;div class="container hard-light"&gt;
+ &lt;div class="group"&gt;
+ &lt;div class="item firefox"&gt;&lt;/div&gt;
+ &lt;svg viewBox="0 0 150 150"&gt;
+ &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+ &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+ &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+ &lt;/svg&gt;
+ &lt;/div&gt;
+ &lt;/div&gt;
+ &lt;/div&gt;
+ &lt;div class="cell"&gt; soft-light
+ &lt;div class="container soft-light"&gt;
+ &lt;div class="group"&gt;
+ &lt;div class="item firefox"&gt;&lt;/div&gt;
+ &lt;svg viewBox="0 0 150 150"&gt;
+ &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+ &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+ &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+ &lt;/svg&gt;
+ &lt;/div&gt;
+ &lt;/div&gt;
+ &lt;/div&gt;
+ &lt;div class="cell"&gt; difference
+ &lt;div class="container difference"&gt;
+ &lt;div class="group"&gt;
+ &lt;div class="item firefox"&gt;&lt;/div&gt;
+ &lt;svg viewBox="0 0 150 150"&gt;
+ &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+ &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+ &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+ &lt;/svg&gt;
+ &lt;/div&gt;
+ &lt;/div&gt;
+ &lt;/div&gt;
+ &lt;div class="cell"&gt; exclusion
+ &lt;div class="container exclusion"&gt;
+ &lt;div class="group"&gt;
+ &lt;div class="item firefox"&gt;&lt;/div&gt;
+ &lt;svg viewBox="0 0 150 150"&gt;
+ &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+ &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+ &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+ &lt;/svg&gt;
+ &lt;/div&gt;
+ &lt;/div&gt;
+ &lt;/div&gt;
+ &lt;div class="cell"&gt; hue
+ &lt;div class="container hue"&gt;
+ &lt;div class="group"&gt;
+ &lt;div class="item firefox"&gt;&lt;/div&gt;
+ &lt;svg viewBox="0 0 150 150"&gt;
+ &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+ &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+ &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+ &lt;/svg&gt;
+ &lt;/div&gt;
+ &lt;/div&gt;
+ &lt;/div&gt;
+ &lt;div class="cell"&gt; saturation
+ &lt;div class="container saturation"&gt;
+ &lt;div class="group"&gt;
+ &lt;div class="item firefox"&gt;&lt;/div&gt;
+ &lt;svg viewBox="0 0 150 150"&gt;
+ &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+ &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+ &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+ &lt;/svg&gt;
+ &lt;/div&gt;
+ &lt;/div&gt;
+ &lt;/div&gt;
+ &lt;div class="cell"&gt; color
+ &lt;div class="container color"&gt;
+ &lt;div class="group"&gt;
+ &lt;div class="item firefox"&gt;&lt;/div&gt;
+ &lt;svg viewBox="0 0 150 150"&gt;
+ &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+ &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+ &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+ &lt;/svg&gt;
+ &lt;/div&gt;
+ &lt;/div&gt;
+ &lt;/div&gt;
+ &lt;div class="cell"&gt; luminosity
+ &lt;div class="container luminosity"&gt;
+ &lt;div class="group"&gt;
+ &lt;div class="item firefox"&gt;&lt;/div&gt;
+ &lt;svg viewBox="0 0 150 150"&gt;
+ &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+ &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+ &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+ &lt;/svg&gt;
+ &lt;/div&gt;
+ &lt;/div&gt;
+ &lt;/div&gt;
+ &lt;/div&gt;
+
+ &lt;div class="note"&gt;Blending globally (blend with the background)&lt;/div&gt;
+ &lt;div class="row"&gt;
+ &lt;div class="cell"&gt; normal
+ &lt;div class="container normal"&gt;
+ &lt;div class="group"&gt;
+ &lt;div class="item firefox"&gt;&lt;/div&gt;
+ &lt;svg viewBox="0 0 150 150"&gt;
+ &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+ &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+ &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+ &lt;/svg&gt;
+ &lt;/div&gt;
+ &lt;/div&gt;
+ &lt;/div&gt;
+ &lt;div class="cell"&gt; multiply
+ &lt;div class="container multiply"&gt;
+ &lt;div class="group"&gt;
+ &lt;div class="item firefox"&gt;&lt;/div&gt;
+ &lt;svg viewBox="0 0 150 150"&gt;
+ &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+ &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+ &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+ &lt;/svg&gt;
+ &lt;/div&gt;
+ &lt;/div&gt;
+ &lt;/div&gt;
+ &lt;div class="cell"&gt; darken
+ &lt;div class="container darken"&gt;
+ &lt;div class="group"&gt;
+ &lt;div class="item firefox"&gt;&lt;/div&gt;
+ &lt;svg viewBox="0 0 150 150"&gt;
+ &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+ &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+ &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+ &lt;/svg&gt;
+ &lt;/div&gt;
+ &lt;/div&gt;
+ &lt;/div&gt;
+ &lt;div class="cell"&gt; screen
+ &lt;div class="container screen"&gt;
+ &lt;div class="group"&gt;
+ &lt;div class="item firefox"&gt;&lt;/div&gt;
+ &lt;svg viewBox="0 0 150 150"&gt;
+ &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+ &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+ &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+ &lt;/svg&gt;
+ &lt;/div&gt;
+ &lt;/div&gt;
+ &lt;/div&gt;
+ &lt;div class="cell"&gt; lighten
+ &lt;div class="container lighten"&gt;
+ &lt;div class="group"&gt;
+ &lt;div class="item firefox"&gt;&lt;/div&gt;
+ &lt;svg viewBox="0 0 150 150"&gt;
+ &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+ &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+ &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+ &lt;/svg&gt;
+ &lt;/div&gt;
+ &lt;/div&gt;
+ &lt;/div&gt;
+ &lt;div class="cell"&gt; overlay
+ &lt;div class="container overlay"&gt;
+ &lt;div class="group"&gt;
+ &lt;div class="item firefox"&gt;&lt;/div&gt;
+ &lt;svg viewBox="0 0 150 150"&gt;
+ &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+ &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+ &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+ &lt;/svg&gt;
+ &lt;/div&gt;
+ &lt;/div&gt;
+ &lt;/div&gt;
+ &lt;div class="cell"&gt; color-dodge
+ &lt;div class="container color-dodge"&gt;
+ &lt;div class="group"&gt;
+ &lt;div class="item firefox"&gt;&lt;/div&gt;
+ &lt;svg viewBox="0 0 150 150"&gt;
+ &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+ &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+ &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+ &lt;/svg&gt;
+ &lt;/div&gt;
+ &lt;/div&gt;
+ &lt;/div&gt;
+ &lt;div class="cell"&gt; color-burn
+ &lt;div class="container color-burn"&gt;
+ &lt;div class="group"&gt;
+ &lt;div class="item firefox"&gt;&lt;/div&gt;
+ &lt;svg viewBox="0 0 150 150"&gt;
+ &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+ &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+ &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+ &lt;/svg&gt;
+ &lt;/div&gt;
+ &lt;/div&gt;
+ &lt;/div&gt;
+ &lt;div class="cell"&gt; hard-light
+ &lt;div class="container hard-light"&gt;
+ &lt;div class="group"&gt;
+ &lt;div class="item firefox"&gt;&lt;/div&gt;
+ &lt;svg viewBox="0 0 150 150"&gt;
+ &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+ &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+ &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+ &lt;/svg&gt;
+ &lt;/div&gt;
+ &lt;/div&gt;
+ &lt;/div&gt;
+ &lt;div class="cell"&gt; soft-light
+ &lt;div class="container soft-light"&gt;
+ &lt;div class="group"&gt;
+ &lt;div class="item firefox"&gt;&lt;/div&gt;
+ &lt;svg viewBox="0 0 150 150"&gt;
+ &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+ &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+ &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+ &lt;/svg&gt;
+ &lt;/div&gt;
+ &lt;/div&gt;
+ &lt;/div&gt;
+ &lt;div class="cell"&gt; difference
+ &lt;div class="container difference"&gt;
+ &lt;div class="group"&gt;
+ &lt;div class="item firefox"&gt;&lt;/div&gt;
+ &lt;svg viewBox="0 0 150 150"&gt;
+ &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+ &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+ &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+ &lt;/svg&gt;
+ &lt;/div&gt;
+ &lt;/div&gt;
+ &lt;/div&gt;
+ &lt;div class="cell"&gt; exclusion
+ &lt;div class="container exclusion"&gt;
+ &lt;div class="group"&gt;
+ &lt;div class="item firefox"&gt;&lt;/div&gt;
+ &lt;svg viewBox="0 0 150 150"&gt;
+ &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+ &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+ &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+ &lt;/svg&gt;
+ &lt;/div&gt;
+ &lt;/div&gt;
+ &lt;/div&gt;
+ &lt;div class="cell"&gt; hue
+ &lt;div class="container hue"&gt;
+ &lt;div class="group"&gt;
+ &lt;div class="item firefox"&gt;&lt;/div&gt;
+ &lt;svg viewBox="0 0 150 150"&gt;
+ &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+ &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+ &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+ &lt;/svg&gt;
+ &lt;/div&gt;
+ &lt;/div&gt;
+ &lt;/div&gt;
+ &lt;div class="cell"&gt; saturation
+ &lt;div class="container saturation"&gt;
+ &lt;div class="group"&gt;
+ &lt;div class="item firefox"&gt;&lt;/div&gt;
+ &lt;svg viewBox="0 0 150 150"&gt;
+ &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+ &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+ &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+ &lt;/svg&gt;
+ &lt;/div&gt;
+ &lt;/div&gt;
+ &lt;/div&gt;
+ &lt;div class="cell"&gt; color
+ &lt;div class="container color"&gt;
+ &lt;div class="group"&gt;
+ &lt;div class="item firefox"&gt;&lt;/div&gt;
+ &lt;svg viewBox="0 0 150 150"&gt;
+ &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+ &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+ &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+ &lt;/svg&gt;
+ &lt;/div&gt;
+ &lt;/div&gt;
+ &lt;/div&gt;
+ &lt;div class="cell"&gt; luminosity
+ &lt;div class="container luminosity"&gt;
+ &lt;div class="group"&gt;
+ &lt;div class="item firefox"&gt;&lt;/div&gt;
+ &lt;svg viewBox="0 0 150 150"&gt;
+ &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+ &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+ &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+ &lt;/svg&gt;
+ &lt;/div&gt;
+ &lt;/div&gt;
+ &lt;/div&gt;
+ &lt;/div&gt;
+ &lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<pre class="brush: css">html,body {
+ height: 100%;
+ box-sizing: border-box;
+ background: #EEE;
+}
+
+.grid {
+ width: 100%;
+ display: flex;
+ font: 1em monospace;
+}
+
+.row {
+ display: flex;
+ flex: 1 auto;
+ flex-direction: row;
+ flex-wrap: wrap;
+ height: auto;
+}
+
+.col {
+ display: flex;
+ flex: 1 auto;
+ flex-direction: column;
+ height: auto;
+}
+
+.cell {
+ margin: .5em;
+ padding: .5em;
+ background-color: #FFF;
+ overflow: hidden;
+ text-align: center;
+}
+
+.note {
+ background: #fff3d4;
+ padding: 1em;
+ margin: .5em .5em 0;
+ font: .8em sans-serif;
+ text-align: left;
+ white-space: nowrap;
+}
+
+.note + .row .cell {
+ margin-top: 0;
+}
+
+.container {
+ position: relative;
+ background: linear-gradient(to right, #000 0%, transparent 50%, #FFF 100%),
+ linear-gradient(to bottom, #FF0 0%, #F0F 50%, #0FF 100%);
+ width: 150px;
+ height: 150px;
+ margin: 0 auto;
+}
+
+.R {
+ transform-origin: center;
+ transform: rotate(-30deg);
+ fill: url(#red);
+}
+
+.G {
+ transform-origin: center;
+ transform: rotate(90deg);
+ fill: url(#green);
+}
+
+.B {
+ transform-origin: center;
+ transform: rotate(210deg);
+ fill: url(#blue);
+}
+
+.isolate .group { isolation: isolate; }
+
+.normal .item { mix-blend-mode: normal; }
+.multiply .item { mix-blend-mode: multiply; }
+.screen .item { mix-blend-mode: screen; }
+.overlay .item { mix-blend-mode: overlay; }
+.darken .item { mix-blend-mode: darken; }
+.lighten .item { mix-blend-mode: lighten; }
+.color-dodge .item { mix-blend-mode: color-dodge; }
+.color-burn .item { mix-blend-mode: color-burn; }
+.hard-light .item { mix-blend-mode: hard-light; }
+.soft-light .item { mix-blend-mode: soft-light; }
+.difference .item { mix-blend-mode: difference; }
+.exclusion .item { mix-blend-mode: exclusion; }
+.hue .item { mix-blend-mode: hue; }
+.saturation .item { mix-blend-mode: saturation; }
+.color .item { mix-blend-mode: color; }
+.luminosity .item { mix-blend-mode: luminosity; }</pre>
+</div>
+
+<div>{{EmbedLiveSample("mix-blend-mode", "100%", 1600, "", "", "example-outcome-frame")}}</div>
+
+<h3 id="HTML_example" name="HTML_example">HTML の例</h3>
+
+<pre class="brush: html">&lt;div class="isolate"&gt;
+ &lt;div class="circle circle-1"&gt;&lt;/div&gt;
+ &lt;div class="circle circle-2"&gt;&lt;/div&gt;
+ &lt;div class="circle circle-3"&gt;&lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<pre class="brush: css">.circle {
+ width: 80px;
+ height: 80px;
+ border-radius: 50%;
+ mix-blend-mode: screen;
+ position: absolute;
+}
+
+.circle-1 {
+ background: red;
+}
+
+.circle-2 {
+ background: lightgreen;
+ left: 40px;
+}
+
+.circle-3 {
+ background: blue;
+ left: 20px;
+ top: 40px;
+}
+
+.isolate {
+ isolation: isolate; /* Without isolation, the background color will be taken into account */
+ position: relative;
+}</pre>
+
+<p>{{EmbedLiveSample("HTML_example", "100%", "180")}}</p>
+
+<h3 id="SVG_example" name="SVG_example">SVG の例</h3>
+
+<p>This example reproduces the previous example using SVG.</p>
+
+<pre class="brush: html">&lt;svg&gt;
+ &lt;g class="isolate"&gt;
+ &lt;circle cx="40" cy="40" r="40" fill="red"/&gt;
+ &lt;circle cx="80" cy="40" r="40" fill="lightgreen"/&gt;
+ &lt;circle cx="60" cy="80" r="40" fill="blue"/&gt;
+ &lt;/g&gt;
+&lt;/svg&gt;</pre>
+
+<pre class="brush:css">circle { mix-blend-mode: screen; }
+.isolate { isolation: isolate; } /* Without isolation, the background color will be taken into account */
+</pre>
+
+<p>{{EmbedLiveSample("SVG_example", "100%", "180")}}</p>
+
+<h2 id="Specifications" name="Specifications">仕様書</h2>
+
+<table class="standard-table">
+ <thead>
+ <tr>
+ <th scope="col">仕様書</th>
+ <th scope="col">状態</th>
+ <th scope="col">備考</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>{{ SpecName('Compositing', '#mix-blend-mode', 'mix-blend-mode') }}</td>
+ <td>{{ Spec2('Compositing') }}</td>
+ <td>初回定義</td>
+ </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
+
+<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div>
+
+<p>{{Compat("css.properties.mix-blend-mode")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{cssxref("&lt;blend-mode&gt;")}}</li>
+ <li>{{cssxref("background-blend-mode")}}</li>
+</ul>
generated by cgit v1.2.3-54-g00ecf (git 2.39.0) at 2025-01-05 21:49:51 +0000