From 684f3a1f7c141b4d1c522687062ff0e6e2e1a080 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Tue, 9 Nov 2021 23:48:02 +0900 Subject: CSS Masking のプロパティの文書を変換準備 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/mask-composite/index.html | 120 ----------------------------- 1 file changed, 120 deletions(-) delete mode 100644 files/ja/web/css/mask-composite/index.html (limited to 'files/ja/web/css/mask-composite/index.html') diff --git a/files/ja/web/css/mask-composite/index.html b/files/ja/web/css/mask-composite/index.html deleted file mode 100644 index a41474ae08..0000000000 --- a/files/ja/web/css/mask-composite/index.html +++ /dev/null @@ -1,120 +0,0 @@ ---- -title: mask-composite -slug: Web/CSS/mask-composite -tags: - - CSS - - CSS Masking - - CSS Property - - Experimental - - Reference - - 'recipe:css-property' -translation_of: Web/CSS/mask-composite ---- -
{{CSSRef}}
- -

mask-compositeCSS のプロパティで、現在のマスクレイヤーとその下のマスクレイヤーとの間で使われる合成操作を表します。

- -
/* キーワード値 */
-mask-composite: add;
-mask-composite: subtract;
-mask-composite: intersect;
-mask-composite: exclude;
-
-/* グローバル値 */
-mask-composite: inherit;
-mask-composite: initial;
-mask-composite: unset;
-
- -

構文

- -

以下に示す1つまたは複数のキーワード値を、カンマで区切って指定します。

- -

- -

混合において、現在のマスクレイヤーは source、その下にあるすべてのマスクレイヤーは destination とします。

- -
-
add
-
source が destination の上に配置されます。
-
subtract
-
destination の外側に source が配置されます。
-
intersect
-
destination と重なっている source の部分が destination を置き換えます。
-
exclude
-
source と destination で重なっていない領域が結合されます。
-
- -

公式定義

- -

{{cssinfo}}

- -

形式文法

- -{{csssyntax}} - -

- -

追加でマスクレイヤーの合成

- -

CSS

- -
#masked {
-  width: 100px;
-  height: 100px;
-  background-color: #8cffa0;
-  mask-image: url(https://mdn.mozillademos.org/files/12668/MDN.svg),
-              url(https://mdn.mozillademos.org/files/12676/star.svg);
-  mask-size: 100% 100%;
-  mask-composite: add; /* Can be changed in the live sample */
-}
-
- - - -

結果

- -

{{EmbedLiveSample("Compositing_mask_layers_with_addition", "100px", "130px")}}

- -

仕様書

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

ブラウザーの互換性

- -

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

-- cgit v1.2.3-54-g00ecf