html - 调整 sprited 图像的大小

Question

我想调整 Sprite 背景图像的大小。我的 sprite-picture 在 spriting (?) 后返回一张 8px*8px 图片。我想将它的大小调整为 80px*80px。我无法调整整张图片的大小，因为它在外部服务器上。

我的代码:

.mc-skin{
  background: url('https://s3.amazonaws.com/MinecraftSkins/TupidaMC.png') -8px -8px;
  background-repeat: no-repeat;
  width: 8px;
  height: 8px;
}

有什么办法可以调整背景图片的大小吗？我希望我对我的问题的解释足够好...

JsFiddle:http://jsfiddle.net/WL7HK/1/

Answer 1

你可以为此使用 background-size: 640px 320px，它已经有不错的 browser support. 了。

例子:

.mc-skin{
  background: url('https://s3.amazonaws.com/MinecraftSkins/TupidaMC.png');
  background-repeat: no-repeat;
  background-size: 640px 320px;
  background-position: -80px -80px; /* adjusted for increased size */
  width: 80px;
  height: 80px;  
  display: block;
  image-rendering: -moz-crisp-edges;         /* Firefox */
  image-rendering:   -o-crisp-edges;         /* Opera */
  image-rendering: -webkit-optimize-contrast;/* Webkit (non-standard naming) */
  image-rendering: crisp-edges;
  -ms-interpolation-mode: nearest-neighbor;  /* IE (non-standard property) */
}

fiddle :http://jsfiddle.net/WL7HK/4/