diff options
| author | Masahiro FUJIMOTO <mfujimot@gmail.com> | 2021-11-09 23:48:02 +0900 |
|---|---|---|
| committer | Masahiro FUJIMOTO <mfujimot@gmail.com> | 2021-11-20 22:35:37 +0900 |
| commit | 684f3a1f7c141b4d1c522687062ff0e6e2e1a080 (patch) | |
| tree | 3798639490bef357508feadef36e1bee7860cf3e /files/ja/web/css/mask-image/index.html | |
| parent | 0fade6a001e0275bd20326c6ac6e04a759bb8cd0 (diff) | |
| download | translated-content-684f3a1f7c141b4d1c522687062ff0e6e2e1a080.tar.gz translated-content-684f3a1f7c141b4d1c522687062ff0e6e2e1a080.tar.bz2 translated-content-684f3a1f7c141b4d1c522687062ff0e6e2e1a080.zip | |
CSS Masking のプロパティの文書を変換準備
Diffstat (limited to 'files/ja/web/css/mask-image/index.html')
| -rw-r--r-- | files/ja/web/css/mask-image/index.html | 94 |
1 files changed, 0 insertions, 94 deletions
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 ---- -<div>{{CSSRef}}</div> - -<p><strong><code>mask-image</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、要素のマスクレイヤーとして使用される画像を設定します。</p> - -<pre class="brush:css no-line-numbers">/* キーワード値 */ -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; -</pre> - -<p>{{cssinfo}}</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<h3 id="Values" name="Values">値</h3> - -<dl> - <dt><code>none</code></dt> - <dd>このキーワードは、透明な黒い画像レイヤーとして解釈されます。</dd> - <dt><code><mask-source></code></dt> - <dd>{{cssxref("<url>")}} による {{SVGElement("mask")}} または CSS 画像への参照です。</dd> - <dt>{{cssxref("<image>")}}</dt> - <dd>マスク画像レイヤーとして使用される画像の値です。</dd> -</dl> - -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> - -{{csssyntax}} - -<h2 id="Example" name="Example">例</h2> - -<h3 id="CSS">CSS</h3> - -<pre class="brush: 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); -}</pre> - -<h3 id="HTML">HTML</h3> - -<pre class="brush: html"><div id="masked"></div> -</pre> - -<p>{{EmbedLiveSample('Example', '100px', '100px', '', '', 'hide-codepen-jsfiddle')}}</p> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("CSS Masks", "#the-mask-image", "mask-image")}}</td> - <td>{{Spec2("CSS Masks")}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("css.properties.mask-image")}}</p> |