-
Notifications
You must be signed in to change notification settings - Fork 8k
/
index.md
73 lines (48 loc) · 1.87 KB
/
index.md
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
---
title: mask-position
slug: Web/CSS/mask-position
---
{{CSSRef}}
La propriété [CSS](/fr/docs/Web/CSS) **`mask-position`** indique la position initiale pour chaque image de masque utilisée. Cette position est relative à l'origine définie via la propriété [`mask-origin`](/fr/docs/Web/CSS/mask-origin).
```css
/* Valeurs avec un mot-clé */
mask-position: top;
mask-position: bottom;
mask-position: left;
mask-position: right;
mask-position: center;
/* Valeurs de <position> */
mask-position: 25% 75%;
mask-position: 0px 0px;
mask-position: 10% 8em;
/* Valeurs multiples */
mask-position: top right;
mask-position:
1rem 1rem,
center;
/* Valeurs globales */
mask-position: inherit;
mask-position: initial;
mask-position: revert;
mask-position: unset;
```
## Syntaxe
Cette propriété s'utilise avec une ou plusieurs valeurs de position, séparées par des virgules.
### Valeurs
- `<position>`
- : Une position CSS (type [`<position>`](/fr/docs/Web/CSS/position_value)) qui représente une position par rapport aux côtés de la boîte de l'élément. Les décalages indiqués peuvent être relatifs ou absolus. On notera que la position obtenue peut être située en dehors de la boîte de l'élément.
## Définition formelle
{{cssinfo}}
## Syntaxe formelle
{{csssyntax}}
## Exemples
### Définir la position du masque
Dans le fragment de code qui suit, vous pouvez modifier la valeur de `mask-position` avec une des valeurs autorisées (voir ci-avant) pour observer l'effet de la propriété.
Si vous utilisez un navigateur basé sur Chromium, modifiez la valeur de la propriété `-webkit-mask-position`.
{{EmbedGHLiveSample("css-examples/masking/mask-position.html", '100%', 760)}}
## Spécifications
{{Specifications}}
## Compatibilité des navigateurs
{{Compat}}
## Voir aussi
- [Rognage et masquage avec CSS (en anglais)](https://css-tricks.com/clipping-masking-css/)