从图标网格缩放图标

Question

我正在网站上工作，我有一个图标网格，每行都是一个不同的图标，每列都是不同的阴影。图标网格以.png格式存储，如下所示：

要访问特定图标，我在CSS和html中有以下内容：<i class="icon type1 blue>...</i>这非常有效，但问题是我需要让图标变小，所以我的png减小了75％。但现在的问题是，它显示了相同的图标，但它显示了蓝色图标的一半和灰色图标的一半，如下所示：

如何才能以75％的比例显示蓝色图标？这是CSS代码，其中图像（设置完整大小）：

.icon{
  background-image: url('images/icons.png');
  background-repeat: no-repeat;
  width: 28px;
  heigh: 28px;
  display: block;
  font-style: normal;
}

Answer 1

你可以尝试

background: url(images/yourimage.jpg) no-repeat center center fixed;

请参阅：Stretch background image css?

或者您也可以在css3中尝试background-size: 100%;

Answer 2

尝试这种格式

background-image: url('images/icons.png') leftposition topposition;

左侧位置和倾斜将取决于您的精灵图像（图标的抓握）

例如

 background-image: url('images/icons.png') -28px 0;

Answer 3

这是一种使用一个精灵文件的方法，而不是在物理上调整精灵的大小，＆＃34;使用CSS调整各个图标的大小。这是一个小提琴：http://jsfiddle.net/89mGj/。

HTML：

<ul class = "regular">
    <li></li>
    <li></li>
    <li></li>
</ul>
<ul class = "regular small">
    <li></li>
    <li></li>
    <li></li>
</ul>

.regular的CSS：

.regular > li {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 5px;
    background: url(http://i59.tinypic.com/v4crk2.png)
                no-repeat
                -340px -280px/680px;
}

.regular:not(.small) > li:nth-of-type(2) {
    background-position: -30px -321px;
}

.regular:not(.small) > li:nth-of-type(3) {
    background-position: -30px -485px;
}

这种方法很基本。精灵用作不重复的背景图像。然后，对于每个列表项，仅更改精灵的背景位置以显示适当的图标。

这里的CSS显示较小的图标：

.regular.small > li {
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-right: 3px;
    background-position: -255px -210px;
    background-size: 510px;
}

.regular.small > li:nth-of-type(2) {
    background-position: -23px -241px;
}

.regular.small > li:nth-of-type(3) {
    background-position: -23px -363px;
}

背景位置坐标和背景大小乘以0.75以创建更小的图标（即680px * 0.75 = 510px）。