如何調整 CSS Sprite 中圖片的大小？

縮放 CSS 精靈中的圖片

在 CSS 精靈中，從較大圖片中裁剪較小圖像是一種常見技術。但是如果您想調整裁剪部分的大小怎麼辦？以下是如何縮放 CSS 精靈中的圖片：

背景大小

如果大多數瀏覽器支援背景大小，您可以使用以下內容：

background-size : 150% 150%;

縮放並Transform:scale

為了實現跨瀏覽器相容性，請考慮使用Zoom 和Transform:scale:

[class^="icon-"]{
    zoom:0.5;
    -moz-transform:scale(0.5);
}

.icon-big{
    zoom:0.60;
    -moz-transform:scale(0.60);
}

.icon-small{
    zoom:0.29;
    -moz-transform:scale(0.29);
}

. Zoom:

的組合

• 支持者Webkit/Blink/IE
• 依照預設縮放設定進行縮放

Transform:scale:

• 由Mozilla支持，舊版Opera
• 獨立於預設縮放比例設定

使用此方法，您可以輕鬆縮小或放大精靈內的裁切影像。例如，要減少所提供範例中「Item1,2,3,4」旁邊的圖示的大小，只需增加scale()即可。您也可以根據需要調整縮放或比例值。

以上是如何調整 CSS Sprite 中圖片的大小？的詳細內容。更多資訊請關注PHP中文網其他相關文章！