Comment puis-je mettre à l'échelle des images recadrées dans des sprites CSS ?

Mise à l'échelle des images recadrées dans les sprites CSS

L'article intitulé « Sprites CSS : techniques pour améliorer les performances Web » traite des méthodes permettant de recadrer des images plus petites à partir de une image plus grande. Cet article explore la possibilité non seulement de recadrer, mais également de redimensionner la région recadrée avant de la placer dans la mise en page.

Comme démontré dans l'article, un exemple d'extrait de code CSS peut ressembler à ceci :

A {
  background-image: url(spriteme1.png);
  background-position: -10px -56px;
}

Pour redimensionner l'image recadrée après son extraction du sprite, la propriété background-size peut être utilisée. Cette propriété est prise en charge par la plupart des principaux navigateurs (mais pas tous). Par exemple, pour redimensionner l'image recadrée à 150 % de sa taille d'origine, la règle de style suivante peut être utilisée :

background-size: 150% 150%;

Une autre approche pour redimensionner l'image recadrée consiste à utiliser une combinaison de zoom et de transformation : propriétés d'échelle. Cette méthode fournit une prise en charge multi-navigateurs pour les appareils de bureau et mobiles. Voici un exemple :

[class^="icon-"] {
  display: inline-block;
  background: url('../img/icons/icons.png') no-repeat;
  width: 64px;
  height: 51px;
  overflow: hidden;
  zoom: 0.5;
  /* Mozilla support */
  -moz-transform: scale(0.5);
  -moz-transform-origin: 0 0;
}

.icon-big {
  zoom: 0.60;
  /* Mozilla support */
  -moz-transform: scale(0.60);
  -moz-transform-origin: 0 0;
}

.icon-small {
  zoom: 0.29;
  /* Mozilla support */
  -moz-transform: scale(0.29);
  -moz-transform-origin: 0 0;
}

Grâce à ces techniques, il est possible de recadrer et de redimensionner des images plus petites à partir d'un sprite CSS, ce qui permet une plus grande flexibilité et personnalisation lorsque vous travaillez avec des mises en page de pages Web.

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!