-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
が指定された場合、マスク画像は包含する要素と共にスクロールせず、ビューポート内の一定の場所に残ります。
公式定義
形式文法
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