From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/ja/web/css/mix-blend-mode/index.html | 655 +++++++++++++++++++++++++++++ 1 file changed, 655 insertions(+) create mode 100644 files/ja/web/css/mix-blend-mode/index.html (limited to 'files/ja/web/css/mix-blend-mode') 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 +--- +
{{CSSRef}}
+ +

CSS の mix-blend-mode プロパティは、要素の内容物と親要素の内容物や要素の背景をどのように混合するかを設定します。

+ +
{{EmbedInteractiveExample("pages/css/mix-blend-mode.html")}}
+ + + +

構文

+ +
/* キーワード値 */
+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;
+
+ +

値

+ +
+
<blend-mode>
+
適用する混合モードを表す {{cssxref("<blend-mode>")}} です。
+
+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ + + +
{{EmbedLiveSample("mix-blend-mode", "100%", 1600, "", "", "example-outcome-frame")}}
+ +

HTML の例

+ +
<div class="isolate">
+  <div class="circle circle-1"></div>
+  <div class="circle circle-2"></div>
+  <div class="circle circle-3"></div>
+</div>
+ +
.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;
+}
+ +

{{EmbedLiveSample("HTML_example", "100%", "180")}}

+ +

SVG の例

+ +

This example reproduces the previous example using SVG.

+ +
<svg>
+  <g class="isolate">
+    <circle cx="40" cy="40" r="40" fill="red"/>
+    <circle cx="80" cy="40" r="40" fill="lightgreen"/>
+    <circle cx="60" cy="80" r="40" fill="blue"/>
+  </g>
+</svg>
+ +
circle { mix-blend-mode: screen; }
+.isolate { isolation: isolate; } /* Without isolation, the background color will be taken into account */
+
+ +

{{EmbedLiveSample("SVG_example", "100%", "180")}}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{ SpecName('Compositing', '#mix-blend-mode', 'mix-blend-mode') }}{{ Spec2('Compositing') }}初回定義
+ +

{{cssinfo}}

+ +

ブラウザーの対応

+ + + +

{{Compat("css.properties.mix-blend-mode")}}

+ +

関連情報

+ + -- cgit v1.2.3-54-g00ecf