CSS-Sprites auf Hintergrundbilder skalieren: eine Anleitung

Question

.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>

Ich kann mein Sprite nicht auf eine kleinere Größe skalieren. Ich möchte, dass es halb so groß ist wie die tatsächliche Größe, also 100 x 100 Pixel. Wie kann ich es mit dem Attribut background-size skalieren? Jetzt wird nur noch die volle Bildgröße von 100x100px angezeigt...

Answer 1

您可以使用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);
}

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

Answer 2

您的图像精灵的尺寸为 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;
}

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