-webkit-mask-attachment

非標準: この機能は標準ではなく、標準化の予定もありません。公開されているウェブサイトには使用しないでください。ユーザーによっては使用できないことがあります。実装ごとに大きな差があることもあり、将来は振る舞いが変わるかもしれません。

mask-image が指定されている場合、 -webkit-mask-attachment はそのマスク画像の位置をビューポート内で固定するか、それとも包含ブロックと共にスクロールするかを指定します。

css

/* キーワード値 */
-webkit-mask-attachment: scroll;
-webkit-mask-attachment: fixed;
-webkit-mask-attachment: local;

/* 複数の値 */
-webkit-mask-attachment: scroll, local;
-webkit-mask-attachment: fixed, local, scroll;

/* グローバル値 */
-webkit-mask-attachment: inherit;
-webkit-mask-attachment: initial;
-webkit-mask-attachment: unset;

構文

値

scroll

scroll が指定された場合、マスク画像はマスク画像を含むブロックと共にビューポート内でスクロールします。

fixed

fixed が指定された場合、マスク画像は包含する要素と共にスクロールせず、ビューポート内の一定の場所に残ります。

公式定義

初期値scroll
適用対象すべての要素
継承なし
計算値指定通り
アニメーションの種類離散値

形式文法

Error: could not find syntax for this item

例

ビューポートにマスク画像を固定

css

body {
  -webkit-mask-image: url("images/mask.png");
  -webkit-mask-attachment: fixed;
}

仕様書

Not part of any standard.

ブラウザーの互換性

BCD tables only load in the browser

関連情報