L'attribut clip est un attribut relativement utile, mais il est souvent rare dans les applications pratiques, et 52CSS.com en introduit très peu. Deux points à noter lors de l'application de l'attribut clip :
1. L'attribut clip doit être utilisé avec l'attribut de positionnement position pour prendre effet.
2. Les coordonnées de calcul du recadrage du clip sont calculées à partir du coin supérieur gauche, c'est-à-dire du point (0,0), comme le montre la figure 3. Ceci est différent du remplissage et de la marge de la marge droite et de la marge inférieure. ils partent du point le plus à droite et comptent à partir du bas.
Syntaxe de base de l'attribut clip : 
Exemple de code source
[www.downcodes.com] clip : auto rect (numéro numéro numéro numéro)
Valeur:
auto : valeur par défaut. Pas de détourage des objets
rect (numéro numéro numéro numéro) : fournit quatre valeurs de décalage calculées à partir du coin supérieur gauche de l'objet pour la coordonnée (0,0) dans l'ordre haut-droit-bas-gauche. peut être remplacé par auto, c'est-à-dire ce côté-ci, ne coupez pas
Récupère ou définit la zone visible d'un objet. Les parties situées en dehors de la zone de visualisation sont transparentes.
Cette propriété définit la taille de la zone visible d'un objet positionné de manière absolue. La valeur de la propriété position doit être définie sur absolue pour que cette propriété puisse être utilisée.
Cette propriété est disponible sur les plateformes MAC à partir de IE5.
La propriété de script correspondante est clip .
En plus de créer du texte en couleur, l'attribut clip en CSS peut également recadrer efficacement des éléments dans d'autres pages Web.
L'attribut clip définit la forme de l'élément. Cette propriété permet de définir un rectangle de détourage. Seul le contenu à l'intérieur de ce rectangle est visible et le contenu en dehors de cette zone de découpage a le même effet que overflow:hidden. La zone de découpage peut être plus grande ou plus petite que la zone de contenu de l'élément.
valeur de l'attribut clip : auto | rect (haut, droite, bas, gauche)
Auto signifie pas de recadrage. Les quatre directions du rectangle doivent être remplies de valeurs numériques, indiquant la position du recadrage.
Ci-dessous, je vais donner un exemple simple de recadrage d'une image.
Préparez d’abord une image, comme le montre la figure 1, sa taille est de 159 px*99 pixels. Je prévois d'utiliser l'attribut clip pour recadrer l'image afin que seul le gros point rouge de l'image soit affiché.
Je crée d'abord un cadre div pour placer l'image. Son CSS est défini comme suit :
Exemple de code source
[www.downcodes.com] #imgClip {
position : relative ;
largeur : 159 px ;
hauteur : 99 px ;
arrière-plan :#FFF985 ;
marge : 0 automatique ;
}
L'attribut de positionnement de ce div est défini sur le positionnement relatif afin de l'utiliser comme standard de positionnement pour l'image. L'arrière-plan est défini comme #FFF985 afin de rendre l'effet d'affichage plus évident.
Définissez ensuite les propriétés de recadrage de l'image. La définition CSS est la suivante :
Exemple de code source
[www.downcodes.com] #imgClip img {
position : absolue ;
clip:rect(21px 68px 51px 38px);
}
Le positionnement absolu ici est relatif au div avec l'identifiant imgClip. Les valeurs dans le clip sont classées dans l'ordre haut, droite, bas et gauche.
code html :
Exemple de code source
[www.downcodes.com]