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
|
---
title: '-moz-image-region'
slug: Web/CSS/-moz-image-region
tags:
- CSS
- Non-standard
- Propriété
- Référence(2)
translation_of: Web/CSS/-moz-image-region
---
{{Non-standard_header}}{{CSSRef}}
Pour certains éléments XUL et les pseudo-éléments qui utilisent une image grâce à la propriété {{cssxref("list-style-image")}}, la propriété **`-moz-image-region`** définit la partie de l'image qui est utilisée plutôt que l'image toute entière. Cela permet d'utiliser des images qui regroupent des _sprites_ afin d'améliorer les performances.
```css
/* Valeur avec un mot-clé */
-moz-image-region: auto;
/* Valeur de type <shape> */
-moz-image-region: rect(0, 8px, 4px, 4px);
/* Valeurs globales */
-moz-image-region: inherit;
-moz-image-region: initial;
-moz-image-region: unset;
```
La syntaxe de cette propriété est semblable à la syntaxe de la propriété {{cssxref("clip")}}. Les quatre valeurs sont relatives au coin en haut à gauche de l'image.
> **Note :** Pour un système qui fonctionne pour n'importe quel arrière-plan, on pourra utiliser la propriété {{cssxref("-moz-image-rect")}}.
## Syntaxe
### Valeurs
- `auto`
- : La région pour l'image est définie automatiquement
- `<shape>`
- : Une forme définit la portion d'image qui doit être utilisée. La fonction `rect()` permet de définir un rectangle. Les paramètres de cette fonction correspondent respectivement aux décalages des bords haut, droit, bas et gauche. Voir {{cssxref("<shape>")}}.
### Syntaxe formelle
{{csssyntax}}
## Exemples
```css
#example-button {
/* display only the 4x4 area from the top left of this image */
list-style-image: url("chrome://example/skin/example.png");
-moz-image-region: rect(0px, 4px, 4px, 0px);
}
#example-button:hover {
/* use the 4x4 area to the right of the first for the hovered button */
-moz-image-region: rect(0px, 8px, 4px, 4px);
}
```
## Spécifications
Cette propriété est une propriété propriétaire liée à Mozilla/Gecko et ne fait partie d'aucune spécification.
{{cssinfo}}
## Compatibilité des navigateurs
{{Compat("css.properties.-moz-image-region")}}
## Voir aussi
- {{cssxref("-moz-image-rect")}}
|
