html - 图标网格中的缩放图标

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%;