將 CSS 精靈縮放為背景圖片：指南-PHP中文網路問答

文章專題學習下載問答程式設計字典遊戲最近更新

简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW)

將 CSS 精靈縮放為背景圖片：指南

P粉063862561 2023-11-02 10:39:28

490

.my-sprite {
  background-image: url("https://i.stack.imgur.com/lJpW8.png");
  height: 100px;
  width: 100px;
  background-position: 0 0;
  background-position: -200px 0px;
}

<div class="my-sprite"></div>

我無法讓我的精靈縮放到更小的尺寸。我希望它像實際大小的一半，即 100x100px 如何使用 background-size 屬性縮放它？現在它只顯示 100x100px 的完整圖像尺寸...

P粉063862561

全部回覆(2)

P粉5949413012023-11-03 10:05:02 2樓

您可以使用transform:scale()。

.my-sprite {
  background-image: url("https://picsum.photos/id/217/200/300");
  height: 100px;
  width: 100px;
  background-position: -200px 0px;
  transform: scale(.3);
}

點贊 +0

新增回覆

P粉8645949652023-11-03 09:43:16 1樓

您的圖像精靈的尺寸為500x400，因此如果您想要將background-size 減小2，請定義該尺寸的一半，然後調整background-position 以獲得任何你想要的圖示：

.my-sprite {
    background-image: url("https://i.stack.imgur.com/lJpW8.png");
    height:50px;
    width:50px;
    background-position:150px 0px;
    background-size:250px 200px;
    
    border:1px solid;
}

點贊 +0

新增回覆