From 4c212053deaca3391b1d0be8a0a3bcde7a560aa8 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sat, 6 Nov 2021 11:17:40 +0900 Subject: 合成と混合の各文書を更新 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 2021/11/05 時点の英語版に同期 --- files/ja/web/css/mix-blend-mode/index.md | 966 ++++++++++++++++--------------- 1 file changed, 486 insertions(+), 480 deletions(-) (limited to 'files/ja/web/css/mix-blend-mode/index.md') diff --git a/files/ja/web/css/mix-blend-mode/index.md b/files/ja/web/css/mix-blend-mode/index.md index cd76be032c..9b9adbe7c3 100644 --- a/files/ja/web/css/mix-blend-mode/index.md +++ b/files/ja/web/css/mix-blend-mode/index.md @@ -2,24 +2,25 @@ title: mix-blend-mode slug: Web/CSS/mix-blend-mode tags: + - 混合 - CSS - CSS プロパティ - - ウェブ - - リファレンス + - 合成 - 合成と混合 + - recipe:css-property +browser-compat: css.properties.mix-blend-mode translation_of: Web/CSS/mix-blend-mode --- -
{{CSSRef}}
+{{CSSRef}} -

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

+**`mix-blend-mode`** は [CSS](/ja/docs/Web/CSS) のプロパティで、要素の内容物と親要素の内容物や要素の背景をどのように混合するかを設定します。 -
{{EmbedInteractiveExample("pages/css/mix-blend-mode.html")}}
+{{EmbedInteractiveExample("pages/css/mix-blend-mode.html")}} - +## 構文 -

構文

- -
/* キーワード値 */
+```css
+/* キーワード値 */
 mix-blend-mode: normal;
 mix-blend-mode: multiply;
 mix-blend-mode: screen;
@@ -40,434 +41,441 @@ mix-blend-mode: luminosity;
 /* グローバル値 */
 mix-blend-mode: initial;
 mix-blend-mode: inherit;
+mix-blend-mode: revert;
 mix-blend-mode: unset;
-
+``` + +### 値 + +- {{cssxref("<blend-mode>")}} + - : 適用する混合モードを表す {{cssxref("<blend-mode>")}} です。 -

値

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

形式文法

+## Formal syntax {{csssyntax}} -

例

- - +.luminosity .item { mix-blend-mode: luminosity; } +``` -
{{EmbedLiveSample("mix-blend-mode", "100%", 1600, "", "", "example-outcome-frame")}}
+{{EmbedLiveSample("Effect_of_different_mix-blend-mode_values", "100%", 1600, "", "", "example-outcome-frame")}} -

HTML の例

+

HTML での mix-blend-mode の使用

-
<div class="isolate">
-  <div class="circle circle-1"></div>
-  <div class="circle circle-2"></div>
-  <div class="circle circle-3"></div>
-</div>
+#### HTML -
.circle {
+```html
+

+  

+  

+  

+

+```
+
+#### CSS
+
+```css
+.circle {
   width: 80px;
   height: 80px;
   border-radius: 50%;
@@ -596,58 +611,49 @@ mix-blend-mode: unset;
 }
 
 .isolate {
-  isolation: isolate; /* Without isolation, the background color will be taken into account */
+  isolation: isolate; /* isolation がないと、背景色が考慮されてしまう */
   position: relative;
-}
+} +``` + +#### 結果 + +{{EmbedLiveSample("Using_mix-blend-mode_with_HTML", "100%", "180")}} -

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

+

SVG での mix-blend-mode の使用

-

SVG の例

+#### SVG -

This example reproduces the previous example using SVG.

+```html + + + + + + + +``` -
<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>
+#### CSS -
circle { mix-blend-mode: screen; }
+```css
+circle { mix-blend-mode: screen; }
 .isolate { isolation: isolate; } /* Without isolation, the background color will be taken into account */
-
+``` -

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

+#### 結果 -

仕様書

+{{EmbedLiveSample("Using_mix-blend-mode_with_SVG", "100%", "180")}} - - - - - - - - - - - - - - - -
仕様書状態備考
{{ SpecName('Compositing', '#mix-blend-mode', 'mix-blend-mode') }}{{ Spec2('Compositing') }}初回定義
+## 仕様書 -

{{cssinfo}}

+{{Specifications}} -

ブラウザーの対応

+## ブラウザーの互換性 -

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

+{{Compat}} -

関連情報

+## 関連情報 - +- {{cssxref("<blend-mode>")}} +- {{cssxref("background-blend-mode")}} -- cgit v1.2.3-54-g00ecf