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

Question

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

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

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

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

图片资源：

代码段

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 ~虽然你可能直接点击"Run Code Snippet BTN above"

谢谢！

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

Answer 2

一些可能性：

使用 background-size 属性调整背景图像的大小以适应新尺寸。
使用 CSS 变换缩放 div，例如transform:scale(.7).

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

If you create all your images assets out of one PNG; via different divs. Can you then resize these assets?

html

css

png

background-image