blob: edc1430043102937abe08db09655aaea13271c27 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
|
---
title: '-webkit-mask-attachment'
slug: Web/CSS/-webkit-mask-attachment
tags:
- CSS
- CSS プロパティ
- レイアウト
- 標準外
- リファレンス
- ウェブ
- recipe:css-property
browser-compat: css.properties.-webkit-mask-attachment
translation_of: Web/CSS/-webkit-mask-attachment
---
{{CSSRef}}{{Non-standard_Header}}
{{CSSxRef("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` が指定された場合、マスク画像は包含する要素と共にスクロールせず、ビューポート内の一定の場所に残ります。
## 公式定義
{{CSSInfo}}
## 形式文法
{{CSSSyntax}}
## 例
### ビューポートにマスク画像を固定
```css
body {
-webkit-mask-image: url('images/mask.png');
-webkit-mask-attachment: fixed;
}
```
## 仕様書
Not part of any standard.
## ブラウザーの互換性
{{Compat}}
## 関連情報
- {{CSSxRef("mask")}}
- {{CSSxRef("mask-clip")}}
- {{CSSxRef("-webkit-mask-box-image")}}
- {{CSSxRef("mask-origin")}}
- {{CSSxRef("mask-image")}}
- {{CSSxRef("-webkit-mask-composite")}}
- {{CSSxRef("mask-repeat")}}
|
