Question

在Firefox中显示背景图像时出现了一些问题，我让它发挥作用，但对CSS变得多么臃肿感到惊讶。它现在很好用，但我需要复制多个图像的基本CSS代码。

任何人都可以告诉我是否可以优化CSS类并最小化代码量。我无法利用已经使用过的id，而class ='imga p0'不起作用（其中p0只保存背景位置，对于每个图像位置变为p1，p2，p3 ..）。

提前感谢任何建议。

a.imga0 {background:url(../images/sprite.png) no-repeat;background-color:transparent;
  display:block;width:24px;height:24px;background-position:-288px 0;} /* tick green */
a.imga1 {background:url(../images/sprite.png) no-repeat;background-color:transparent;
  display:block;width:24px;height:24px;background-position:-312px 0;} /* cross grey */
a.imga2 { .....  and so on.

Answer 1

编辑：所以这应该消除重复

/* template */
a.imag0, a.imag1, a.imag2 {
    display: block;
    width: 24px;
    height: 24px;
    background:url(../images/sprite.png) no-repeat;background-color:transparent;
}

/* specifications */
a.imag0 {
    background-position:-288px 0;
}
a.imag1 {
    background-position:-312px 0;
}

您可以创建常规选择器

a {
    background:url(../images/sprite.png) no-repeat;background-color:transparent;
    display: block;
}

这将应用一般样式，例如精灵图像。

您还可以创建一个单独的类（指定更多带空格的类）

例如，你可以拥有

<a class="imag0 spriteclass">something</a>
<a class="imag1 spriteclass">something</a>
<a class="imag2 spriteclass">something</a>

和

a.spriteclass {
    //again the template, such as the sprite and display type and width
}

您的第二个选择是列出您希望css申请的选择器，

a.imag0, a.imag1, a.imag2... {
    // your general css
}

然后像上面一样分别指定具体的精灵位置和细节

Answer 2

添加此内容以防万一有人稍后引用此帖子。

您可以使用以下工具生成最优化的CSS。 http://www.spritecss.com/

为多个图像优化Sprite CSS

2 个答案: