从图标网格缩放图标

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

这里有一种方法，它使用一个sprite文件，而不是“物理地”调整sprite的大小，而是使用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)。