Question

我想调整一个sprited背景图像的大小。我的精灵图片在精灵（？）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) */
}

小提琴：http://jsfiddle.net/WL7HK/4/

调整精灵图像的大小

1 个答案: