html - 如果您使用一个 PNG 创建所有图像资源；通过不同的div。然后您可以调整这些 Assets 的大小吗？

Question

我正在制作动画。此动画对其所有图像资源使用一个 png。 div 的大小适合图像中的一项 Assets 。然后调整 background-position 以完美对齐 div 内的 background-image 资源。这是我经常看到的做法。

我的问题是:有没有办法调整这些元素的大小以适应它们的 div？假设我想让 Assets 变小。这可能吗？

一段时间以来，我一直在努力寻找解决方案。只要不需要我重新编码整个动画，我对任何事情都持开放态度。感谢您提供的任何帮助!

这是我为这个问题创建的示例:

图像 Assets :

代码片段

body{font-family:Arial,Helvetica,sans-serif;color:#0f7eca;text-indent:60px;}

.wb_Assets{
    position:absolute;
    background:url(http://i.stack.imgur.com/uLfyH.png) no-repeat 0px 0px;
    display:inline-block;
    left:60px;
    }
  
#Test1{
    width:204px;
    height:200px;
    }
  
#Test2{
    width:204px;
    height:200px;
    background-position:-210px 0px;
    margin: 120px 0 0 220px;
    transform: rotate(25deg)
    }
  
#Test3{
    width:204px;
    height:200px;
    background-position:-420px 0px;
    margin: 20px 0 0 467px;
    }

<h3> THE 3 EXAMPLES BELOW SHARE SAME THE EXACT IMAGE ASSET</h3>

<br><br>

<div id="Test1" class="wb_Assets"></div>
<div id="Test2" class="wb_Assets"></div>
<div id="Test3" class="wb_Assets"></div>

HERE IS A JSFIDDLE ~尽管您可以单击“运行上面的代码片段 BTN”

谢谢!

Answer 1

您可以缩放元素。

#Test2{
    width:204px;
    height:200px;
    background-position:-210px 0px;
    margin: 120px 0 0 220px;
    transform: rotate(25deg) scale(0.7);   // >> Add scale()
}

---

Example on jsfiddle