Comment puis-je afficher uniquement une partie d'une image en utilisant HTML et CSS ?

Afficher uniquement une partie spécifique d'une image en HTML/CSS

En développement Web, afficher uniquement une partie spécifique d'une image tout en préservant son l'intégrité peut être obtenue en utilisant CSS.

Utilisation du clip CSS Propriété

Comme mentionné dans la question, CSS a une propriété clip. Cependant, cela nécessite que l'élément à découper soit positionné de manière absolue, ce qui limite sa flexibilité.

.container {
  position: relative;
}

#clip {
  position: absolute;
  clip: rect(0, 100px, 200px, 0);
}

Dans cet exemple, l'image avec l'ID "clip" n'affichera que la partie centrale de 50x50px de l'image originale de 250x250px. .

Remarque : La propriété clip utilise la syntaxe suivante : rect(top, right, bottom, left). Dans ce cas, nous avons spécifié 0 pour les valeurs supérieure et gauche, 100 px pour la valeur droite et 200 px pour la valeur inférieure.

Utilisation des références CSS url()

Pour les références CSS url(), il n'existe actuellement aucun moyen intégré d'afficher uniquement une partie d'une image.

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!