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-image/index.html | 94 ---------------------------------- files/ja/web/css/mask-image/index.md | 94 ++++++++++++++++++++++++++++++++++ 2 files changed, 94 insertions(+), 94 deletions(-) delete mode 100644 files/ja/web/css/mask-image/index.html create mode 100644 files/ja/web/css/mask-image/index.md (limited to 'files/ja/web/css/mask-image') diff --git a/files/ja/web/css/mask-image/index.html b/files/ja/web/css/mask-image/index.html deleted file mode 100644 index 1a08aa35f5..0000000000 --- a/files/ja/web/css/mask-image/index.html +++ /dev/null @@ -1,94 +0,0 @@ ---- -title: mask-image -slug: Web/CSS/mask-image -tags: - - CSS - - CSS プロパティ - - CSS マスク - - Experimental - - Reference -translation_of: Web/CSS/mask-image ---- -
{{CSSRef}}
- -

mask-image は CSS のプロパティで、要素のマスクレイヤーとして使用される画像を設定します。

- -
/* キーワード値 */
-mask-image: none;
-
-/* <mask-source> 値 */
-mask-image: url(masks.svg#mask1);
-
-/* <image> 値 */
-mask-image: linear-gradient(rgba(0, 0, 0, 1.0), transparent);
-mask-image: image(url(mask.png), skyblue);
-
-/* 複数の値 */
-mask-image: image(url(mask.png), skyblue), linear-gradient(rgba(0, 0, 0, 1.0), transparent);
-
-/* グローバル値 */
-mask-image: inherit;
-mask-image: initial;
-mask-image: unset;
-
- -

{{cssinfo}}

- -

構文

- -

値

- -
-
none
-
このキーワードは、透明な黒い画像レイヤーとして解釈されます。
-
<mask-source>
-
{{cssxref("<url>")}} による {{SVGElement("mask")}} または CSS 画像への参照です。
-
{{cssxref("<image>")}}
-
マスク画像レイヤーとして使用される画像の値です。
-
- -

形式文法

- -{{csssyntax}} - -

例

- -

CSS

- -
#masked {
-  width: 100px;
-  height: 100px;
-  background-color: #8cffa0;
-  -webkit-mask-image: url(https://mdn.mozillademos.org/files/12676/star.svg);
-  mask-image: url(https://mdn.mozillademos.org/files/12676/star.svg);
-}
- -

HTML

- -
<div id="masked"></div>
-
- -

{{EmbedLiveSample('Example', '100px', '100px', '', '', 'hide-codepen-jsfiddle')}}

- -

仕様書

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

ブラウザーの互換性

- -

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

diff --git a/files/ja/web/css/mask-image/index.md b/files/ja/web/css/mask-image/index.md new file mode 100644 index 0000000000..1a08aa35f5 --- /dev/null +++ b/files/ja/web/css/mask-image/index.md @@ -0,0 +1,94 @@ +--- +title: mask-image +slug: Web/CSS/mask-image +tags: + - CSS + - CSS プロパティ + - CSS マスク + - Experimental + - Reference +translation_of: Web/CSS/mask-image +--- +
{{CSSRef}}
+ +

mask-image は CSS のプロパティで、要素のマスクレイヤーとして使用される画像を設定します。

+ +
/* キーワード値 */
+mask-image: none;
+
+/* <mask-source> 値 */
+mask-image: url(masks.svg#mask1);
+
+/* <image> 値 */
+mask-image: linear-gradient(rgba(0, 0, 0, 1.0), transparent);
+mask-image: image(url(mask.png), skyblue);
+
+/* 複数の値 */
+mask-image: image(url(mask.png), skyblue), linear-gradient(rgba(0, 0, 0, 1.0), transparent);
+
+/* グローバル値 */
+mask-image: inherit;
+mask-image: initial;
+mask-image: unset;
+
+ +

{{cssinfo}}

+ +

構文

+ +

値

+ +
+
none
+
このキーワードは、透明な黒い画像レイヤーとして解釈されます。
+
<mask-source>
+
{{cssxref("<url>")}} による {{SVGElement("mask")}} または CSS 画像への参照です。
+
{{cssxref("<image>")}}
+
マスク画像レイヤーとして使用される画像の値です。
+
+ +

形式文法

+ +{{csssyntax}} + +

例

+ +

CSS

+ +
#masked {
+  width: 100px;
+  height: 100px;
+  background-color: #8cffa0;
+  -webkit-mask-image: url(https://mdn.mozillademos.org/files/12676/star.svg);
+  mask-image: url(https://mdn.mozillademos.org/files/12676/star.svg);
+}
+ +

HTML

+ +
<div id="masked"></div>
+
+ +

{{EmbedLiveSample('Example', '100px', '100px', '', '', 'hide-codepen-jsfiddle')}}

+ +

仕様書

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

ブラウザーの互換性

+ +

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

-- cgit v1.2.3-54-g00ecf