如何調整 CSS Sprite 中圖片的大小？-css教學-PHP中文網

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

Barbara Streisand

發布： 2024-12-08 22:36:17

原創

993 人瀏覽過

How Can I Resize Images Within a CSS Sprite?

縮放 CSS 精靈中的圖片

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

背景大小

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

background-size : 150% 150%;

登入後複製

縮放並Transform:scale

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

[class^="icon-&quot;]{
    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中文網其他相關文章！