用作背景图像时如何缩放 CSS 精灵？

Posted 2023-03-25

【中文标题】用作背景图像时如何缩放 CSS 精灵？

【英文标题】：How to scale CSS sprites when used as background-image?

【发布时间】：2018-10-22 09:27:57

【问题描述】：

.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 的完整图像大小...

【参考方案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;

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

你可以通过任何比例数字减少更多，你只需要做正确的计算

.my-sprite 
    background-image: url("https://i.stack.imgur.com/lJpW8.png");
    height:calc(100px / 5);
    width:calc(100px / 5);
    background-position:calc(3/5 * 100px) 0px;
    background-size:calc(500px / 5) calc(400px / 5);
    
    border:1px solid;

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

这是一个通用公式，它使用 CSS 变量作为比例编号，也用于选择图标。

.my-sprite 
    --n:1; /* scaling factor */
    /* coordinates of the image */
    --i:3; 
    --j:0; 

    display:inline-block;
    background-image: url("https://i.stack.imgur.com/lJpW8.png");
    height:calc(100px / var(--n));
    width:calc(100px / var(--n));
    background-position:calc(var(--i)/var(--n) * 100px) calc(var(--j)/var(--n) * 100px);
    background-size:calc(500px / var(--n)) calc(400px / var(--n));
    
    border:1px solid;

<div class="my-sprite"></div>
<div class="my-sprite" style="--n:2;--i:2;--j:2"></div>
<div class="my-sprite" style="--n:3;--i:4;--j:1"></div>
<div class="my-sprite" style="--n:4;--i:1"></div>
<div class="my-sprite" style="--n:5;--j:3"></div>
<div class="my-sprite" style="--n:0.5"></div>
<div class="my-sprite" style="--n:0.8"></div>

【参考方案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);

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

【讨论】：

这个想法是在某种程度上回答人们的问题。不对他们的整个应用程序进行编码。

如果这是你想要的，我可以删除答案。

这正是我所需要的。您可以应用transform-origin: top left;，以便缩放后的图像保持在左上角。