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-position/index.md | 125 ++++++++++---------------------- 1 file changed, 38 insertions(+), 87 deletions(-) (limited to 'files/ja/web/css/mask-position/index.md') diff --git a/files/ja/web/css/mask-position/index.md b/files/ja/web/css/mask-position/index.md index 9d7f404404..d4003c04ff 100644 --- a/files/ja/web/css/mask-position/index.md +++ b/files/ja/web/css/mask-position/index.md @@ -6,14 +6,17 @@ tags: - CSS プロパティ - CSS マスク - Experimental - - Reference + - リファレンス + - recipe:css-property +browser-compat: css.properties.mask-position translation_of: Web/CSS/mask-position --- -
{{CSSRef}}
+{{CSSRef}} -

mask-position は CSS プロパティで、定義されたマスク画像それぞれについて、 {{cssxref("mask-origin")}} で設定されたマスク位置レイヤーからの相対で初期位置を設定します。

+**`mask-position`** は [CSS](/ja/docs/Web/CSS) プロパティで、定義されたマスク画像それぞれについて、 {{cssxref("mask-origin")}} で設定されたマスク位置レイヤーに対する初期位置を設定します。 -
/* キーワード値 */
+```css
+/* キーワード値 */
 mask-position: top;
 mask-position: bottom;
 mask-position: left;
@@ -32,96 +35,44 @@ mask-position: 1rem 1rem, center;
 /* グローバル値 */
 mask-position: inherit;
 mask-position: initial;
+mask-position: revert;
 mask-position: unset;
-
+``` -

{{cssinfo}}

+## 構文 -

構文

+1 つ以上の `` 値をカンマで区切ったもの。 -

1つ以上の <position> 値をコンマで区切ったもの。

+### 値 -

値

+- {{cssxref("<position>")}} + - : 要素ボックスの辺からの二次元の位置を表す 1 つから 4 つの値です。相対または絶対オフセットを与えることができます。なお、位置は要素ボックスの外に設定することができます。 -
-
{{cssxref("<position>")}}
-
要素ボックスの辺からの二次元の位置を表す1つから4つの値です。相対または絶対オフセットを与えることができます。なお、位置は要素ボックスの外に設定することができます。
-
+## 公式定義 -

形式文法

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

例

- -

CSS

- -
#wrapper {
-  border: 1px solid black;
-  width: 250px;
-  height: 250px;
-}
-
-#masked {
-  width: 250px;
-  height: 250px;
-  background: blue linear-gradient(red, blue);
-  mask-image: url(https://mdn.mozillademos.org/files/12676/star.svg);
-  mask-repeat: no-repeat;
-  mask-position: top right; /* Can be changed in the live sample */
-  margin-bottom: 10px;
-}
-
- - - -

{{EmbedLiveSample("Example", 290, 290)}}

- -

仕様書

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

ブラウザーの対応

- -

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

+## 例 + +### マスク位置の設定 + +`mask-position` の値を上記の許容値のいずれかに変更してみてください。 +Chromium ベースのブラウザーでこの例を見る場合は、`-webkit-mask-position` の値を変更してください。 + +{{EmbedGHLiveSample("css-examples/masking/mask-position.html", '100%', 760)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [Clipping and Masking in CSS](https://css-tricks.com/clipping-masking-css/) -- cgit v1.2.3-54-g00ecf