Propriété du clip CSS
Exemple
Clipper une image :
img {
position: absolute;
clip: rect(0px,60px,200px,0px);
}
Définition et utilisation
Que se passe-t-il si une image est plus grande que son élément contenant ?
La clip
propriété vous permet de spécifier un rectangle pour découper un élément en position absolue. Le rectangle est spécifié sous la forme de quatre coordonnées, toutes partant du coin supérieur gauche de l'élément à découper.
Remarque : La clip
propriété ne fonctionne pas si "overflow:visible".
Remarque : La clip
propriété est obsolète et sera remplacée par la propriété à l'avenir.
clip-path
Valeur par défaut: | auto |
---|---|
Hérité: | non |
Animable : | Oui. En savoir plus sur l'animation |
Version: | CSS2 |
Syntaxe JavaScript : | objet .style.clip="rect(0px,50px,50px,0px)" |
Prise en charge du navigateur
Les nombres dans le tableau indiquent la première version du navigateur qui prend entièrement en charge la propriété.
Property | |||||
---|---|---|---|---|---|
clip | 1.0 | 8.0 | 1.0 | 1.0 | 7.0 |
Syntaxe CSS
clip: auto|shape|initial|inherit;
Valeurs de propriété
Value | Description | Play it |
---|---|---|
auto | No clipping will be applied. This is default | |
shape | Clips an element. The only valid value is: rect (top, right, bottom, left) | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
Pages connexes
Tutoriel CSS : Positionnement CSS
Référence HTML DOM : propriété du clip