From b6ef6d47830a2e326211e670174fe1955ad31fa7 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Wed, 10 Nov 2021 02:36:52 +0900 Subject: CSS Masking に関するプロパティの記事を更新 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 2021/11/10 時点の英語版に同期 --- files/ja/web/css/mask-mode/index.md | 129 ++++++++++++------------------------ 1 file changed, 42 insertions(+), 87 deletions(-) (limited to 'files/ja/web/css/mask-mode') diff --git a/files/ja/web/css/mask-mode/index.md b/files/ja/web/css/mask-mode/index.md index a4f99606b2..dd9e26b2ed 100644 --- a/files/ja/web/css/mask-mode/index.md +++ b/files/ja/web/css/mask-mode/index.md @@ -3,18 +3,20 @@ title: mask-mode slug: Web/CSS/mask-mode tags: - CSS - - CSS Masking - - CSS Property + - CSS マスク + - CSS プロパティ - Experimental - - Reference - - 'recipe:css-property' + - リファレンス + - recipe:css-property +browser-compat: css.properties.mask-mode translation_of: Web/CSS/mask-mode --- -
{{CSSRef}}
+{{CSSRef}} -

CSS の mask-mode プロパティは、 {{cssxref("mask-image")}} で定義されたマスクを、明度とアルファマスクのどちらで扱うかを設定します。

+**`mask-mode`** は [CSS](/ja/docs/Web/CSS) のプロパティで、 {{cssxref("mask-image")}} で定義されたマスクを、輝度とアルファマスクのどちらで扱うかを設定します。 -
/* キーワード値 */
+```css
+/* キーワード値 */
 mask-mode: alpha;
 mask-mode: luminance;
 mask-mode: match-source;
@@ -25,95 +27,48 @@ mask-mode: alpha, match-source;
 /* グローバル値 */
 mask-mode: inherit;
 mask-mode: initial;
+mask-mode: revert;
 mask-mode: unset;
-
+``` -

構文

+## 構文 -

mask-mode プロパティは、以下に示す1つ又は複数のキーワード値を、カンマで区切って指定します。

+`mask-mode` プロパティは、以下に示す 1 つまたは複数のキーワード値を、カンマで区切って指定します。 -

値

+### 値 -
-
alpha
-
このキーワードは、マスクレイヤーの透過性 (アルファチャンネル) の値をマスクの値として使用することを示します。
-
luminance
-
このキーワードは、マスクレイヤーの明度の値をマスクの値として使用することを示します。
-
match-source
-
-

{{cssxref("mask-image")}} プロパティが <mask-source> 型であれば、マスクレイヤー画像の明度の値がマスクの値として使用されます。

+- `alpha` + - : このキーワードは、マスクレイヤーの透過性 (アルファチャンネル) の値をマスクの値として使用することを示します。 +- `luminance` + - : このキーワードは、マスクレイヤーの輝度の値をマスクの値として使用することを示します。 +- `match-source` -

{{cssxref("<image>")}} 型であれば、マスクレイヤー画像のアルファ値がマスクの値として使用されます。

-
-
+ - : {{cssxref("mask-image")}} プロパティが `` 型であれば、マスクレイヤー画像の輝度の値がマスクの値として使用されます。 -

公式定義

+ {{cssxref("<image>")}} 型であれば、マスクレイヤー画像のアルファ値がマスクの値として使用されます。 -

{{cssinfo}}

+## 公式定義 -

形式文法

+{{cssinfo}} + +## 形式文法 {{csssyntax}} -

例

- -

アルファマスクモードの使用

- -

CSS

- -
#masked {
-  width: 227px;
-  height: 200px;
-  background: blue linear-gradient(red, blue);
-  mask-image: url(https://mdn.mozillademos.org/files/12668/MDN.svg);
-  mask-mode: alpha; /* ライブサンプルで変更することができます */
-}
-
- - - -

結果

- -

{{EmbedLiveSample("Using_alpha_mask_mode", 240, 240)}}

- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName("CSS Masks", "#the-mask-mode", "mask-mode")}}{{Spec2("CSS Masks")}}初回定義
- -

ブラウザーの互換性

- -

{{Compat("css.properties.mask-mode")}}

+## 例 + +### アルファマスクモードの使用 + +{{EmbedGHLiveSample("css-examples/masking/mask-mode.html", '100%', 760)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [Clipping and Masking in CSS](https://css-tricks.com/clipping-masking-css/) -- cgit v1.2.3-54-g00ecf