Html 从图标网格缩放图标

我在一个网站上工作，我有一个图标网格，其中每行是一个不同的图标，每列是一个不同的阴影。图标网格以

.png

格式存储，如下所示：

要访问特定图标，我的CSS和html中有以下内容：

您可以尝试

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

见：

或者您也可以尝试
背景大小：100%在css3中
尝试使用此格式

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

左侧位置和顶部位置取决于精灵图像（图标夹点）

比如说

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

这里有一种使用一个精灵文件的方法，而不是“物理地”调整精灵的大小，而是使用CSS调整单个图标的大小。这是一把小提琴：

HTML:

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

以下是显示较小图标的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）。
你能贴一把小提琴吗？你必须调整
中设置的
背景位置
的值。键入1
和
蓝色
。你还需要将块的大小更改75%。根据数学
，这个值是21px。将块的高度和宽度调整为21px。还要确保你的背景位置也增加了21。
<ul class = "regular">
    <li></li>
    <li></li>
    <li></li>
</ul>
<ul class = "regular small">
    <li></li>
    <li></li>
    <li></li>
</ul>

.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;
}

.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;
}