Maison >interface Web >tutoriel CSS >Comment utiliser l'attribut de clip CSS

Comment utiliser l'attribut de clip CSS

silencement
silencementoriginal
2019-05-27 17:01:513758parcourir

Comment utiliser l'attribut de clip CSS

l'attribut clip css est utilisé pour définir la forme de l'élément. Utilisé pour clipser des éléments en position absolue. Lorsque la taille d'une image est plus grande que l'élément la contenant, l'attribut "clip" permet de préciser la taille visible d'un élément afin qu'il soit tronqué et affiché au sein de cet élément.

Vous devez faire attention aux trois points suivants lorsque vous utilisez l'attribut css clip :

1 L'attribut clip ne peut être utilisé que pour des éléments positionnés de manière absolue, position : absolue ou fixe.

2. L'attribut clip a trois valeurs : auto default ; hérite du parent ; une forme définie, mais maintenant il ne peut s'agir que d'un carré rect(), clip : { shape auto | >

3.shape Les quatre éléments de rect(, , , ) ne peuvent pas être omis.


Exemple

<!doctype html>
<html>
    <head>
        <meta http-equiv="Content-type" content="text/html charset=utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
        <title>clip</title>
        <style type="text/css">
            img {
                position:absolute;
                top:0;
                left:10px;
                clip: rect(52px, 280px, 290px, 95px);
            }
        </style>
    </head>
    <body>
        <img  src="00.jpg"/ alt="Comment utiliser l'attribut de clip CSS" >
    </body>
</html>

L'image originale et l'image d'affichage de la page sont les suivantes :


Image originale

Comment utiliser lattribut de clip CSS

Affichage des pages

Comment utiliser lattribut de clip CSS

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn