Comment puis-je mettre à l'échelle les sprites CSS à l'aide de la propriété « background-size » ?

Mise à l'échelle des sprites CSS à l'aide de la propriété Background-Size

Lorsque vous utilisez des sprites CSS comme image d'arrière-plan pour un élément, vous pouvez rencontrer des situations dans lesquelles vous besoin de réduire le sprite à une dimension plus petite. La propriété background-size offre une solution pour réaliser cette mise à l'échelle sans effort.

Pour mettre à l'échelle un sprite CSS, définissez simplement la propriété background-size pour l'élément qui contient le sprite. La valeur que vous définissez pour background-size détermine la taille mise à l'échelle du sprite. Par exemple, si vous souhaitez réduire la taille du sprite de moitié, définissez background-size sur la moitié de la largeur et de la hauteur d'origine du sprite.

Dans l'exemple fourni, le sprite a une dimension de 100x100px. Pour redimensionner le sprite à la moitié de sa taille, modifiez la propriété background-size comme suit :

.my-sprite {
  background-size: 50px 50px;
}

N'oubliez pas d'ajuster la propriété background-position en conséquence pour accéder à l'icône souhaitée dans la feuille de sprite. En réduisant le sprite, vous pouvez afficher une version plus petite de l'image sans perdre aucun détail.

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!