如何用CSS设置png图标集？

Question

我在很多例子中都看到了jquery插件和CSS样式的htmlElements 他们用几个图标设置图像的图标。

我想用我的应用程序进行练习。

例如在该图像中，如何在CSS中选择一个？或者选择其中一个的正确方法是什么？

任何例子？

谢谢你！

Answer 1

这里使用CSS的技巧是你正在显示整个图像，但它被翻译，并由其父图像剪切，可以通过将其设置为背景或绝对定位的图像overflow: hidden。 / p>

例如，我们假设以下HTML：

<div class="sprite-images checkbox"></div>

我们假设我们要显示的复选框位于spritesheet中的(32, 32)，并且大小为32x32px。

然后，你的CSS看起来像这样：

.sprite-images{
    width: 32px;
    height: 32px;
    display: block; // this doesn't matter too much, but can't be inline
}

.sprite-images.checkbox{
    background-image: url("images/my_spritesheet.png"); // <-- insert spritesheet url
    background-position: 32px 32px; // <-- these are the spritesheet coords for the actual icon
}

就这么简单。 background-image将自动被div本身剪切，我们已经将其设置为精灵大小32x32，所以只需要在背景中进行翻译，这样只有你想要的精灵可见。