Attribut clip CSS
Définition et utilisation
L'attribut clip coupe les éléments positionnés de manière absolue.
Qu'arrive-t-il lorsque la taille d'une image est plus grande que l'élément qui la contient ? L'attribut "clip" permet de définir la taille visible d'un élément, de sorte que cet élément est découpé et affiché sous cette forme.
Description
Cette propriété est utilisée pour définir un rectangle de coupe. Pour un élément définissant l'absolu, seul le contenu à l'intérieur de ce rectangle est visible. Le contenu en dehors de cette zone de coupe est traité selon la valeur de overflow. La zone de coupe peut être plus grande ou plus petite que la zone de contenu de l'élément.
Voir également :
Tutoriel CSS :Positionnement CSS
Manuel de référence HTML DOM :Attribut clip
Exemple
Couper l'image :
img
{
position:absolute;
clip:rect(0px,60px,200px,0px);
}
Syntaxe CSS
clip: auto|forme|initial|hérité;
Valeur de l'attribut
| Valeur | Description |
|---|---|
| forme | Définir la forme d'un élément. La seule valeur de forme valable est : rect (haut, droite, bas, gauche) |
| auto | Valeur par défaut. Aucune coupure n'est appliquée. |
| hérité | Définit que la valeur de la propriété clip doit être héritée de l'élément parent. |
Détails techniques
| Valeur par défaut : | auto |
|---|---|
| Héritabilité : | non |
| Version : | CSS2 |
| Syntaxe JavaScript : | object.style.clip="rect(0px,50px,50px,0px)" |
Plus d'exemples
- Définir la forme d'un élément
- Cet exemple montre comment définir la forme d'un élément. Cet élément est découpé dans la forme et ensuite affiché.
Support du navigateur
Les nombres dans le tableau indiquent la première version du navigateur qui prend en charge cette propriété en totalité.
| Chrome | IE / Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| 1.0 | 8.0 | 1.0 | 1.0 | 7.0 |
