From 7de13c6876615ba9bd2ba81164fe75d0d9c3d160 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Thu, 17 Jun 2021 01:28:53 +0900 Subject: Web/CSS/blend-mode を更新 (#1096) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 2021/05/08 時点の英語版に同期 --- files/ja/web/css/blend-mode/index.html | 92 +++++++++++++++++++++++++++------- 1 file changed, 74 insertions(+), 18 deletions(-) (limited to 'files/ja/web/css') diff --git a/files/ja/web/css/blend-mode/index.html b/files/ja/web/css/blend-mode/index.html index 14e1373def..1425d46207 100644 --- a/files/ja/web/css/blend-mode/index.html +++ b/files/ja/web/css/blend-mode/index.html @@ -4,33 +4,32 @@ slug: Web/CSS/blend-mode tags: - Blend modes - CSS - - CSS Compositing - CSS Data Type - - CSS データ型 - - CSS 合成 - Compositing + - Compositing and Blending + - Data Type - Reference + - color - ブレンドモード - 合成 +browser-compat: css.types.blend-mode translation_of: Web/CSS/blend-mode ---
{{CSSRef}}

<blend-mode> は CSS のデータ型で、要素が重なったときにどのように色が現れるかを記述します。 {{cssxref("background-blend-mode")}} または {{cssxref("mix-blend-mode")}} プロパティで使用されます。

-

ブレンドモードは、適用されるレイヤーの各ピクセルについて前景と背景の色を取り、それらを計算し、新しい色の値を返します。

- -

構文

+

構文

<blend-mode> データ型は、以下に挙げたキーワードのうちの一つで定義します。

-

値

+

値

normal

下の色が何であるかに関わらず、上の色が最終的な色になります。
- この効果は2枚の不透明の紙が重なっているようなものです。

+ この効果は 2 枚の不透明の紙が重なっているようなものです。

-
hard-light
+
hard-light

上の色が暗い色であれば multiply 、明るい色であれば screen の結果が最終的な色になります。
このブレンドモードは overlay と同じですが、レイヤーが入れ替わっています。
@@ -241,7 +240,7 @@ translation_of: Web/CSS/blend-mode

difference
-

2つの色のうち明るい色から、暗い色を減算した結果が最終的な色になります。
+

2 つの色のうち明るい色から、暗い色を減算した結果が最終的な色になります。
黒いレイヤーは変化をもたらしません。白いレイヤーは、もうひとつのレイヤーの色を反転します。

@@ -366,11 +365,64 @@ translation_of: Web/CSS/blend-mode
-

ブレンドモードの補間

+

解説

+ +

ブレンドモードは、適用されるレイヤー間のそれぞれのピクセルにおいて前景色と背景色を取り、計算を行い、新しい色の値を返します。

+ +

ブレンドモード同士の変化は補完されません。すべての変更が直接反映されます。

+ +

例

+ +

ブレンドモードの比較

+ +

次の例の <div> には、 Firefox のロゴと線形グラデーションの 2 つの背景画像を設定してあります。その下に <select> メニューがあって background-blend-mode を変更することができ、それが <div> に適用されますので、様々なブレンドモードの効果を比較することができます。

+ +

HTML

+ +
<div></div>
+<p>ブレンドモードを選択してください。</p>
+<select>
+  <option selected>normal</option>
+  <option>multiply</option>
+  <option>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>
+ +

CSS

+ +
div {
+  width: 300px;
+  height: 300px;
+  background: url(https://media.prod.mdn.mozit.cloud/attachments/2020/07/29/17350/3b4892b7e820122ac6dd7678891d4507/firefox.png) no-repeat center,
+  linear-gradient(to bottom, blue, orange);
+}
+ +

JavaScript

+ +
const selectElem = document.querySelector('select');
+const divElem = document.querySelector('div');
+
+selectElem.addEventListener('change', () => {
+  divElem.style.backgroundBlendMode = selectElem.value;
+});
+ +

結果

-

ブレンドモード間の遷移は補間されません。変更は直ちに行われます。

+

{{EmbedLiveSample('Blend_mode_comparison', '100%', 370)}}

-

仕様書

+

仕様書

@@ -389,15 +441,19 @@ translation_of: Web/CSS/blend-mode
-

ブラウザーの互換性

- - +

ブラウザーの互換性

{{Compat}}

-

関連情報

+

関連情報

+ +

様々なブレンドモードの他のウェブサイトにおける解説

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