Maison > interface Web > tutoriel CSS > le corps du texte

Comment capturer une partie d'une image en utilisant CSS

WBOY
Libérer: 2021-12-10 18:05:58
original
7991 Les gens l'ont consulté

Méthode : 1. Utilisez le style "position:absolute" pour définir l'élément d'image sur un style de positionnement absolu ; 2. Utilisez l'attribut clip pour intercepter l'image dans le style de positionnement absolu. La syntaxe est "élément d'image {clip : rect(haut, droite, bas, gauche);}".

Comment capturer une partie d'une image en utilisant CSS

L'environnement d'exploitation de ce tutoriel : système Windows 10, version CSS3&&HTML5, ordinateur Dell G3.

Comment capturer une partie d'une image en utilisant CSS

En CSS, vous pouvez utiliser l'attribut clip pour capturer une partie d'une image, ce qui peut recadrer des éléments absolument positionnés.

Nous devons donc d'abord définir l'image sur un style de positionnement absolu, puis utiliser l'attribut clip pour l'intercepter.

Les valeurs possibles de l'attribut clip sont les suivantes :

Comment capturer une partie dune image en utilisant CSS

L'exemple est le suivant :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
  img{
    position:absolute;
    clip:rect(0px 100px 200px 0px);
  }
  </style>
</head>
<body>
  <img src="1118.02.png" alt="">
</body>
</html>
Copier après la connexion

Résultat de sortie :

Comment capturer une partie dune image en utilisant CSS

(Partage vidéo d'apprentissage : tutoriel vidéo 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!

Étiquettes associées:
css
source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal